Почему 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 вызываются обе функции, потому что щелчок срабатывает как на .closeX, так и на .menu. Таким образом, класс удаляется и добавляется снова.

Редактировать: Чтобы исправить это, вы должны либо переместить .closeX, чтобы он больше не являлся дочерним элементом .menu, либо если вы не хотите менять разметку, делайте так, как подсказывает ответ Рори, и остановите равномерное распространение, добавив e.stopPropagation() (см. ответ Рори для реализации).

Answer 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>

Answer 3

this относится к триггеру события, возможно, button. Класс menu не имеет добавленного вами класса, добавляется в триггер события.