为什么 removeClass() 不作用于内部元素？

Question

类已添加但未删除。当我将.closeX元素移动到相同级别时，.menu它可以工作，但在内部时则不行。

$('.menu').click(function() {
  $(this).addClass('openMenu')
})

$('.closeX').click(function() {
  $('.menu').removeClass('openMenu')
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="menu">
  <div class="closeX"></div>
</section>

Answer 1

问题是因为.closeX是 的孩子.menu。这意味着当您单击.closeX该类时将被删除。然而，该事件使 DOM 冒泡.menu，然后再次将类添加到其中。

要stopPropagation()在内部事件处理程序上修复此调用：

$('.menu').click(function() {
  $(this).addClass('openMenu')
})

$('.closeX').click(function(e) {
  e.stopPropagation();
  $('.menu').removeClass('openMenu')
})

.openMenu { background-color: #CCC; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="menu">
  Click me to add class
  <div class="closeX">Click me to remove class</div>
</section>

Answer 2

它被删除了 - 但它又被添加了。因为.closeX在 里面.menu，当你点击.closeX这两个函数时都会被调用，因为点击是在.closeX和上触发的.menu。因此该类被删除，然后再次添加。

编辑：要解决此问题，您应该移动.closeX使其不再是 的子项.menu，或者如果您不想更改标记，请按照 Rory 的回答建议并使用 add 停止偶数传播e.stopPropagation()（请参阅 Rory 的答案以了解实现） .