3

我试图让一个 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");
});

所以我想这一定是阻止了第二个功能的工作,但我真的不知道为什么。

有任何想法吗?谢谢!

4

3 回答 3

5

试试这个

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

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

于 2013-04-19T21:25:53.777 回答
5

由于您的a元素位于.new-discussion元素内部,因此当您单击 时a,它还会click在父元素上触发事件,因为该事件正在冒泡。

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

$('a.cancel').click(function(e) {
    e.stopPropagation();
    $('.new-discussion.expand').addClass("small").removeClass("expand");
});
于 2013-04-19T21:28:42.130 回答
0

由于链接位于 内部<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>
于 2013-04-19T21:26:31.070 回答