jQuery函数阻止在点击时添加/删除类

Question

我正在尝试让div在点击时获得一个新类(使其扩展),并在单击该div内的取消链接时将其返回到旧类(使其关闭).

<div class="new-discussion small">
    <a class="cancel">Cancel</a>
</div>

<script>
    $('.new-discussion.small').click(function() {
        $(this).addClass("expand").removeClass("small");
    });
    $('a.cancel').click(function() {
        $('.new-discussion.expand').addClass("small").removeClass("expand");
    });
</script>

现在,添加扩展类可以完美地工作,但是在单击取消链接后关闭面板只有在我删除此代码时才有效:

$('.new-discussion.small').click(function() {
    $(this).addClass("expand").removeClass("small");
});

所以我想这必须阻止第二个功能工作,但我真的无法弄清楚为什么.

有任何想法吗？谢谢!

Answer 1

试试这个

$('a.cancel').click(function() {
    $('.new-discussion.expand').addClass("small").removeClass("expand");
    return false;
});

原因可能是您的点击事件正在传播到父级,也正在侦听点击事件.

Answer 2

由于你的a元素在.new-discussion元素内,当你点击a它时,它也会click在父元素上触发事件,因为事件正在冒泡.

要修复它,您可以通过调用来停止事件的传播e.stopPropagation();.这将阻止执行任何父处理程序.

$('a.cancel').click(function(e) {
    e.stopPropagation();
    $('.new-discussion.expand').addClass("small").removeClass("expand");
});