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>

点击＆＃34;菜单＆＃34;正确地公开或隐藏文本。你如何添加一个功能，让它显示+/-或类似的更多/更少的东西来提示访问者？

Answer 1

实现此目的的一种简单方法是将“菜单”初始化为“+菜单”，如下所示：

<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

添加更多或更少+/-

1 个答案: