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

});