javascript - Jquery 删除类正在重新应用该类

标签 javascript jquery css addclass removeclass

我是 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 上,链接不可点击。

提前致谢

最佳答案

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

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

Working Demo

关于javascript - Jquery 删除类正在重新应用该类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32629505/

相关文章:

javascript - 为什么我们不在 app.module.ts 的装饰器数组中添加 'ngModule'

javascript - 循环 ajax 请求,直到它在 Promise.all 中返回响应

javascript - 我的 Raphael 代码中发现错误

javascript - 用于自定义图像元素符号的 Nivo-Slider

php - 从多个表中选择一个值

html - 为什么这种垂直对齐不适用于 Bootstrap ?

javascript - 解析器无法正常工作

javascript - 在 Chrome 扩展中渲染 Twig 模板

javascript - Jquery 单击首先不适用于输入元素

php - 如何在 zend framework 2 语法中写在 CSS 行下面?