當元素是父元素時，jQuery會在單擊時停止所有具有相同類的元素

Question

我已經將此功能編寫為按鈕上的click事件回調，單擊該按鈕時將切換該類以提供下拉菜單。 如果下拉列表元素是下一個，則此方法有效，但如果該元素位於被單擊元素的父元素之外，則此方法無效。 問題是我在同一頁面上有多個具有相同功能的按鈕，並且在單擊一個按鈕時它們都會觸發：

https://jsfiddle.net/21xj96up/7/

 $('.direction-button').on('click', function() { $(this).next('.direction-dropdown').toggleClass('active'); }); 

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> <div class="contact-card"> <div class="contact-directions"> <a href="#" title="#" class="direction-button link-button animate-after">Directions</a> </div> <!-- end .contact-directions --> <div class="contact-info"></div> <!-- .contact-info --> <div class="contact-partner"></div> <!-- end .contact-info --> </div> <!-- end .contact-card --> <div class="direction-dropdown fade-in"> <p>Display #1</p> </div> <div class="contact-card"> <div class="contact-directions"> <a href="#" title="#" class="direction-button link-button animate-after">Directions</a> </div> <!-- end .contact-directions --> <div class="contact-info"></div> <!-- .contact-info --> <div class="contact-partner"></div> <!-- end .contact-info --> </div> <!-- end .contact-card --> <div class="direction-dropdown fade-in"> <p>Display #1</p> </div> 

任何和所有幫助非常感謝:)

Answer 1

檢查它是否有一個名為“ contact-card ”的“父容器”，如果是，則從另一個繼續執行您已做的事情：

https://jsfiddle.net/21xj96up/12/

$('.direction-button').on('click', function(){
    if( 1 === $(this).closest('.contact-card').next('.direction-dropdown').length) {
        $(this).closest('.contact-card').next('.direction-dropdown').toggleClass('active');
    } else {
        $(this).next('.direction-dropdown').toggleClass('active');
    }
});

使用“更短”版本進行更新 https://jsfiddle.net/21xj96up/21/現在，這甚至更好一點，因為我們使用相同的版本

$(this).closest('.contact-card').next('.direction-dropdown')

兩次。 因此，我們可以將其保存到變量中，然后使用該變量。

$('.direction-button').on('click', function(){
    var parentElement = $(this).closest('.contact-card').next('.direction-dropdown');
    if( 1 === parentElement.length) {
        parentElement.toggleClass('active');
    } else {
        $(this).next('.direction-dropdown').toggleClass('active');
    }
});

Answer 2

我會建議使用此代碼，因為選擇條件不同：

$('.direction-button').on('click', function(){
  var b = $(this);
  if(b.parents('div').length>0) {
        b.parents('div').next('.direction-dropdown').toggleClass('active');
  } else {
  b.next('.direction-dropdown').toggleClass('active');
  }   
});

Answer 3

在這種情況下，當元素層次結構不一致時，可以使用數據屬性和ID，這使切換器和內容層次結構獨立。

切換器的屬性：

data-toggle-target="display1"

目標的ID

`id="display1"`

jQuery代碼

$( '#' + $(this).attr('data-toggle-target')).toggleClass('active');

https://jsfiddle.net/s57zk5hb/

Answer 4

在您的代碼上，因為$(this)在$('.direction-button')的上下文內，所以這實際上意味着“ direction-button”。 在“方向按鈕”的同一級別中，不存在“方向按鈕”的下一個“方向下拉菜單”。

div
    div
        direction button
        <it looks for the item here>
    /div
/div
<item is actually here>

你可以試試，

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

在第二種情況下實現功能。

Answer 5

如果結構一致，顯然會更好。 但是，假設您對此幾乎沒有控制，則意味着您對其他類或id的控制也很少，而這些其他類或id將提供更好的解決方案。 鑒於此，您可以在所有按鈕和下拉列表的集合中找到當前按鈕的索引，並在該列表中找到下一個下拉列表。

var idx = $(this).index('.direction-button, .direction-dropdown');

$('.direction-button, .direction-dropdown')
    .slice(idx)
    .filter('.direction-dropdown')
    .first()
    .toggleClass('active');

像這樣： https : //jsfiddle.net/j7h32w90/1/

這幾乎可以在任何DOM結構中使用。