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

【问题标题】：Why does removeClass() not act on the inner element?为什么 removeClass() 不作用于内部元素？
【发布时间】：2020-02-28 14:29:20
【问题描述】：

类已添加但未删除。当我将.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>

【问题讨论】：

this 指的是事件触发器，可能是一个按钮。 menu类没有你添加的类，添加到事件触发器中。
div 在里面的问题是删除发生了，但是点击传播到菜单，它重新添加了你的类。

标签： javascript jquery html css frontend

【解决方案1】：

它已被删除 - 但它正在被再次添加。因为.closeX 在.menu 内部，所以当您单击.closeX 时，这两个函数都会被调用，因为在.closeX 和.menu 上都会触发单击。所以这个类被删除了，然后又被添加了。

编辑：要解决此问题，您应该移动 .closeX，使其不再是 .menu 的子代，或者如果您不想更改标记，请按照 Rory 的做法答案建议并通过添加 e.stopPropagation() 停止均匀传播（请参阅 Rory 的实施答案）。

【讨论】：

这描述了问题。你是怎么解决的？

【解决方案2】：

问题是因为.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>

【讨论】：

没问题，很高兴为您提供帮助

【解决方案3】：

this 指的是事件触发器，可能是button。 menu 类没有你添加的类，添加到事件触发器中。

【讨论】：