当元素是父元素时，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结构中使用。