如何在多个按钮上单独切换每个按钮？

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'); 
});