Question

我已将此函数编写为按钮上的单击事件回调，单击此按钮可切换类以提供下拉列表。如果下拉元素是下一个元素，则此方法有效，但如果元素位于被单击元素的父元素之外，则无效。问题是我在同一页面上有多个具有相同功能的按钮，当点击一个按钮时它们都会触发：

$('.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和内容层次结构无关。

Toggler的属性：

data-toggle-target="display1"

目标的ID

`id="display1"`

jQuery-Code

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

https://jsfiddle.net/s57zk5hb/

Answer 4

在您的代码上，由于$(this)位于$('.direction-button')的上下文中，这实际上意味着＆＃34;方向按钮＆＃34;。没有下一个＆＃34;方向下拉＆＃34;出现在＆＃34;方向按钮＆＃34;在＆＃34;方向按钮＆＃34;的同一级别。

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结构。

当元素是父元素时，jQuery会停止在单击时打开相同类的所有元素

5 个答案: