Question

我是jquery的新手，我试图添加然后删除一个div类。首先，我在点击div时使用addClass();添加类名，然后我想通过单击链接将其删除。这是我到目前为止编写的代码，但它不起作用。 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上，它的行为就像是在点击链接时重新应用该类。
在Chrome上，该链接无法点击。

提前致谢

Answer 1

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

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

<强> Working Demo

Answer 2

您的问题是#close是.expandable的孩子。因此，当您单击#close时，.expandable上的点击监听器也会被触发（这意味着您将该类删除后直接将其添加回来）。

要解决您的问题，您应该确保您的结算项目不是开场项目的孩子。

Jquery remove类正在重新应用该类

2 个答案: