更改事件有界的对象时，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 的链接，因此我无法再将点击事件绑定到整个 div，因此新链接可以并行工作。然后我尝试将点击事件绑定到 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();

    ...
});

希望这会有所帮助。