Question

我正在尝试让div在点击时获得一个新类（使其扩展），并在单击该div中的取消链接时将其返回到旧类（使其关闭）。 / p>

<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");
});

Answer 3

由于链接位于<div>内，因此它同时使用了两种点击方法。在继续之前检查容器是否已打开可能会有所帮助：

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

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

3 个答案: