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

Question

我已經將該函數編寫爲按鈕上的單擊事件回調，當單擊此按鈕時會切換類以提供下拉列表。如果下拉元素是下一個元素，那麼這將起作用，但如果元素不在單擊元素的父元素之外，則不起作用。是的問題是，我有一個具有相同的功能在同一個頁面上的多個按鈕，並且他們當點擊一個所有火：

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，這使得切換器和內容層次獨立。

屬性爲Toggler：用於目標

`id="display1"` 

data-toggle-target="display1"

ID jQuery的碼

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

https://jsfiddle.net/s57zk5hb/

Answer 4

在您的代碼上，因爲$(this)位於$('.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的控制權也很小，這將提供更好的解決方案。鑑於此，您可以在所有按鈕和下拉列表中找到當前按鈕的索引，並找到該列表中的下一個下拉列表。

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結構。