jquery - jquery通过单击子元素禁用动画

Question

我有一些列表元素，当用户单击父列表元素时，它们将被折叠。问题是，当使用单击子列表项时，动画也会开始。

    <ul>
        <li class="folder">foo -- animation shall be enabled here
            <ul>
                <li><a href="http://google.com/" target="_blank">google</a></li>
                <li><a href="#" >item2</a></li>
                <li><a href="#" >item3</a></li>
                <li><a href="#" >item4</a></li>
            </ul>
        </li>
        <li class="folder">bar -- and animation shall be enabled here
            <ul>
                <li><a href="#" >item1</a></li>
                <li><a href="#" >item2</a></li>
                <li><a href="http://heise.de" target="_blank">Heise</a></li>
                <li><a href="#" >item4</a></li>
            </ul>
        </li>
    </ul>

如何通过单击子项来防止动画？提前致谢！

Answer 1

$('li').on("click",function(){
    $( this ).parent( ".folder" ).stop( true, true );
});

将为此工作

Answer 2

哦，找到了我自己的解决方案

$('li.folder').on('click', function(event){
    if(event.target === this){
        $(this).children().animate({
            height:'toggle'
        },600);
    }
});

还是非常感谢！

Answer 3

您可以改为停止立即传播所有事件，如下所示：

$(function() {
    $('li li').on('click', function(e) {
        e.stopImmediatePropagation();
        alert('Hi from inner <li>!');
    });
    $('li').on('click', function() {
        alert('Hi from parent <li>!');
    });
});