Question

点击时我有一个链接显示div并按下内容

我想添加其他链接，以便在

下面显示自己的div

以下jquery代码仅在我使用1个链接时才有效，如何有其他链接显示自己的div？

$(document).ready(function(){
var menu = $('#menu')
$('#menu-trigger').click(function(event){
event.preventDefault();
if (menu.is(":visible"))
{
      menu.slideUp(400);
      $(this).removeClass("open");
}
else
{
      menu.slideDown(400);
      $(this).addClass("open");
}
}); 

});

Answer 1

我建议使用类来绑定click和data-attribute来查找抽屉的id，这样你就可以编写一次toggle，并在许多元素上重用它。

    $('.toggler').click(function(event){
      event.preventDefault();
      var menu = $(this).data('menu');
      $("#"+menu).slideToggle(400);
      $(this).toggleClass("open");
    });

.drawer { display:none; }
.open { color: #f00; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#"  class='toggler'  data-menu="foo">click</a>
    <a href="#" class='toggler' data-menu="bar">click</a>
    <div id="foo" class="drawer">stuff</div>
    <div id="bar" class="drawer">other stuff</div>

添加多个菜单以下推内容

1 个答案: