jquery - 添加更多或更少 +/-

Question

我正在尝试设置此代码，该代码用于显示 panel_menu 中或多或少的所有内容，以在菜单按钮旁边显示 + 或 - 文本，但我不知道如何在 jQuery 中实现这一点。我看到的示例与我在此处看到的示例不同。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
  $(document).ready(function(){
    $("#toggle_menu").click(function(){
     $("#panel_menu").slideToggle(0);
    });
  });
</script>

<style>
  h3 { padding: 5px; cursor: pointer; margin: 0px; }
  h3:hover { color: #ff0000; background: #eee; }
  #toggle,#toggle_menu { padding: 5px; }
  #panel_menu { margin: 0px; display:none; padding: 5px; }
</style>

<h3 id="toggle_menu">Menu </h3>
<div id="panel_menu">
Lorem ipsum dolor sit amet
</div>

正如点击“菜单”一样，可以正确显示或隐藏文本。您如何添加一个功能以使其显示 +/- 或类似更多/更少的内容来提示访问者？

Answer 1

实现这一点的一个简单方法是将“Menu”初始化为“+ Menu”，如下所示:

<h3 id="toggle_menu">+ Menu </h3>

...

$(document).ready(function() {
  var tm =   $("#toggle_menu");
  tm.on('click',
    function () {
        $("#panel_menu").slideToggle(0);
        if(tm.text() == '- Menu') tm.text('+ Menu')
        else tm.text('- Menu');
    }
  );
});

jsfiddle