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

Question

我目前有使用 css 和 jquery 的动画树结构的基本代码，但由于我对 jquery 的了解有限，我的论点有问题，见下文。在第 3 行，我说如果 li 扩展了类，则添加一个转换来打开和关闭 li。如果您尝试我的DEMO，您会发现它适用于顶层 li，但不适用于树中的每个单独的 li。有没有一种方法可以让 jQuery 计算出结构中的 li 是否被扩展，而不是对每个 li 进行相同的处理？谢谢

$(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"); });
        }
    });
});

小提琴