如何在多个按钮上分别切换每个按钮？

Question

我多次使用相同的按钮，每个按钮都有相同的隐藏和显示功能。单击该按钮后，我必须切换以下数据

<button type="button" class="pull-right btn menu">
    <span class="glyphicon glyphicon-option-vertical" aria-hidden="true"></span>
</button>
<ul class="downmenu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
</ul>

而js代码是

$('.menu').click(function(){
    $(this).each(function(){
    $('.downmenu').toggle('show');
    });
    });

我的问题是，单击任何按钮后，所有按钮都可以正常工作。如何分别切换每个。我必须在每个按钮上切换下拉菜单列表，我该怎么做？

Answer 1

点击事件内部的循环是多余的。问题是.downmenu 的全局选择器，它选择该类的所有元素。解决方案是隔离单击按钮旁边的元素.downmenu：

$('.menu').click(function(){
    $(this).next('.downmenu').toggle('show');
});