Jquery动画文件树-如何将每个li高度转换为auto

Question

我目前有一个动画树结构使用css和jquery的基本代码，但与我有限的jquery知识我有麻烦，我的论点，见下文。在第3行，我说如果li有类扩展，然后添加一个过渡，将打开和关闭li。如果你尝试我的DEMO，你会发现它适用于顶层li，但不适用于树中的每个单独的li。是否有一种方法，我可以让jQuery来确定是否在结构中的一个李展开或不，而不是对待每一个李相同?谢谢你

$(function () {
    $("li").click(function () {
        var expanded = $(this).is(".expanded");
        if (expanded) 
        {
            $(this).transition({ 'max-height': '20px', overflow: 'hidden' }, 500, 'in', function () {$(this).removeClass("expanded"); });
        } 
        else 
        {
            $(this).transition({ 'max-height': $(this).get(0).scrollHeight, overflow: ''}, 500, 'out', function () { $(this).addClass("expanded"); });
        }
    });
});

Answer 1

当事件到达父元素时，元素就崩溃了。

你需要使用.stopPropagation来防止这种情况。

这将告诉事件只在它匹配的最低级别执行，因此事件不会向上气泡到展开的父LI。

$(function () {
    $("li").click(function (e) {
        e.stopPropagation()
        var expanded = $(this).is(".expanded");
        if (expanded) 
        {
            $(this).transition({ 'max-height': '20px', overflow: 'hidden' }, 500, 'in', function () {$(this).removeClass("expanded"); });
        } 
        else 
        {
            $(this).transition({ 'max-height': $(this).get(0).scrollHeight, overflow: ''}, 500, 'out', function () { $(this).addClass("expanded"); });
        }
    });
});

小提琴