Jquery 删除 class 正在重新应用 class

Question

我是 jquery 的新手，我正在尝试添加然后删除 div class。首先，我在单击 div 时添加 class 名称和 addClass();，然后我想通过单击 link 将其删除。这是我到目前为止编写的代码，但它不起作用。 https://jsfiddle.net/j2tsk90k/1/

我做错了什么？

HTML:

<div class="block yellow expandable skewX">
<div>Test</div> <span id="transp">  
<a id="close">close</a>
</span>
</div>

JS:

$('.expandable').on('click', function () {
 $(this).addClass('fullscreen');
});

$('#close').click(function () {
 $('.expandable').removeClass('fullscreen');
});

注：

在 firefox 上，它的行为就像是在单击 link 时重新应用 class。
在 Chrome 上 link 不可点击。

提前致谢

Answer 1

那是因为父事件在子点击时被触发。您需要停止向子元素传播事件：

$('#close').click(function (e) {
  e.stopPropagation()
  $('.expandable').removeClass('fullscreen');
});

Working Demo

Answer 2

您的问题是 #close 是 .expandable 的 child。因此，当你点击#close时，.expandable上的点击监听器也会被触发（这意味着你删除了class，然后直接添加回来）。

要解决您的问题，您应该确保您的关闭项不是初始项的 child。

Jquery 删除 class 正在重新应用 class

Jquery remove class is re-applying the class

javascript

css

jquery

addclass

removeclass