javascript - jQuery ToggleClass Is Toggling When I Click On Inside Links

Question

I have links inside a list item that toggles on click, but when I click on the link the toggleclass activates and it disappears.

<script type="text/javascript">
$(document).ready(function() {
    $(".content-list > li").live("click", function () {
        $(this).find('.links').toggleClass("hide");
    });
});
</script>

http://jsfiddle.net/davemj88/DtrDw/1/

If you click on any link inside the list item it toggles and goes away. I want it to remain visible unless you click on the background or not a link.

I want the list item to toggle UNLESS a user clicks on a link somewhere inside, then I DON'T want it to toggle the class. How do I restrict the toggleclass to only working when a user doesn't click on another link inside?

Answer 1

如果为 li 中的链接添加 click 事件处理程序，则可以使用 e.stopPropagation() 来防止该事件冒泡到包含的 li 中。

$(".content-list > li a").live("click", function(e) {
    e.stopPropagation();
});

JS小提琴

您会注意到删除链接不受影响，因为用于事件绑定的选择器是直接后代 li 和其中的锚标记，因此您需要适当调整选择器，但这应该可以理解.