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();來停止事件的傳播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>