jQuery .click停止在单击时打开相同类的所有元素

Question

我已经编写了绑定到按钮的函数，单击该按钮可以切换类以提供下拉菜单。 唯一的问题是，我在同一页面上有多个具有相同功能的按钮，并且当单击一个按钮时它们都会触发：

任何和所有帮助极大地施加了:)

 app.bind.DirectionDropdown = function(){ $('.direction-button').bind('click', function(){ $('.direction-dropdown').toggleClass('active'); }); }; 

 .fade-in { visibility: hidden; opacity: 0; transition: visibility 0s,opacity .3s ease-in-out,all .3s ease-in-out; -webkit-transition: visibility 0s,opacity .3s ease-in-out,all .3s ease-in-out; -ms-transition: visibility 0s,opacity .3s ease-in-out,all .3s ease-in-out; -moz-transition: visibility 0s,opacity .3s ease-in-out,all .3s ease-in-out; } .active { visibility: visible; opacity: 1; transform: translate(0,0); -webkit-transform: translate(0,0); -moz-transform: translate(0,0); -ms-transform: translate(0,0); } 

 <a href="#" title="#" class="direction-button">Click to reveal text</a> <div class="direction-dropdown fade-in"> <p>Reveal this</p> </div> <a href="#" title="#" class="direction-button">Click to reveal text</a> <div class="direction-dropdown fade-in"> <p>Reveal this</p> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> 

Answer 1

在回调中，您需要使用此代码而不是.direction-button：

 $('.direction-button').bind('click', function(){

    $(this).toggleClass('active');

 });

$（“。direction-button”）在整个DOM对象中进行JQuery搜索

Answer 2

您必须使用this关键字，并且仅将.direction-button的.direction-dropdown定位为目标

$('.direction-button').on('click', function(){

    $(this).next('.direction-dropdown').toggleClass('active');

});