javascript - 当更改事件有界的对象时，JQuery 的 .next() 似乎不起作用

Question

我有这个标记:

<div class="list-group-item participant-main">
   <i class="fa fa-chevron-down" id="chevron-for-div" aria-hidden="true"></i>
   <div class="row">
      <div class="col-sm-8">
         <h5 class="list-group-item-heading">A title</h5>
      </div>
      <div class="col-sm-4 list-group-item-quick-links ">
        <a href="#" />
        <a href="#" />
      </div>
   </div>
</div>

<div class='list-group-item hidden-group-item hide'>
   <div class="row">
      <div class="col-sm-8">
         <p class="list-group-item-text">
            Some text
         </p>
      </div>
      <div class="col-sm-4">
         <p class="list-group-item-text">
            More text
         </p>
      </div>
   </div>
</div>

以前，当通过以下代码单击 .participant-main 时，我使用 Jquery 取消隐藏/隐藏 .hidden-group-item:

$('body').on('click', '.member-main, .participant-main', function() {
  if ($(this).next('.hidden-group-item').hasClass('hide')) {
     $('.hidden-group-item').addClass('hide');
     $(this).next('.hidden-group-item').toggleClass('hide');
  }
  else {
     $(this).next('.hidden-group-item').toggleClass('hide');
  }
  $('.hidden-form-item').addClass('hide');
});

我正在向 .participant-main 添加一些链接，因此我无法再将点击事件绑定(bind)到整个 div，因此新链接可以并行工作。然后我尝试将 click 事件绑定(bind)到 div 内的特定元素，因此我将目标类移动到这样的特定元素。

<div class="list-group-item">
   <i class="fa fa-chevron-down participant-main" id="chevron-for-div" aria-hidden="true"></i>
   <div class="row">
      <div class="col-sm-8 participant-main">
         <h5 class="list-group-item-heading">A title</h5>
      </div>
      <div class="col-sm-4 list-group-item-quick-links ">
        <a href="#" />
        <a href="#" />
      </div>
   </div>
</div>

我希望它能起作用，但事实并非如此。

我不明白为什么会发生这种情况以及如何解决。据我了解 .next() 获取与指定选择器匹配的下一个元素。

Answer 1

由于您已经嵌套了元素，因此您应该使用 stopPropagation() 来阻止事件冒泡:

$('body').on('click', '.member-main, .participant-main', function(e) {
    e.stopPropagation();

    ...
});

希望这有帮助。