javascript - 使用 jQuery 渐进式显示

Question

我嵌套了无序列表。

<ul id="catalogue">
    <li>List
        <ul>
            <li>Item 1</li>
            <li>Item 2
                <ul>
                    <li>Item 1.1</li>
                    <li>Item 1.2
                        <ul>
                            <li>Item 1.2.1</li>
                            <li>Item 1.2.2
                                <ul>
                                    <li>Item 1.2.2.1</li>
                                </ul>
                            </li>
                            <li>Item 1.2.3</li>
                        </ul>
                    </li>
                    <li>Item 1.3</li>
                </ul>
            </li>
            <li>Item 3</li>
        </ul>
    </li>
</ul>

一开始只显示最顶层，但是如果您单击每个 LI，如果其中有子 UL，它应该显示下一个控制杆，依此类推。如果您再次单击同一个 LI，下面的级别应该会隐藏。

$(document).ready(function () {
    $('#catalogue li').each(function () {
        $(this).contents().first().wrap("<span/>")
    });
    $('#catalogue li > span').addClass('brd');

    $('ul').hide();
    $('#catalogue').show();

    $('#catalogue li').click(function () {
        var nxt = $(this).children('ul:first')
        if ($(nxt).is(":visible")) {
            $(nxt).slideUp();
        } else {
            $(nxt).slideDown();
        }
        $(this).parent().show();
    });

});

如果用户单击同级 LI 并且它有一个子 UL，则该 UL 应显示，但任何同级的 UL 应关闭。

Answer 1

您需要阻止事件传播到父级。单击每个 li 将调用其自己的单击处理程序，并且该事件将传播到其父 li 调用其处理程序，依此类推。因此，您可以使用 event.stopPropagation() 在某一级别停止它。您可以使用 slideToggle 来切换元素的当前状态。

尝试:

$('#tree li').click(function (e) {
    e.stopPropagation();
    $(this).children('ul:first').slideToggle();
});

<强> Demo

如果您想在单击其同级时向上滑动，

$('#tree li').click(function (e) {
    e.stopPropagation();
    var $this = $(this);
    $this.children('ul:first').slideToggle().end()
               .siblings().children('ul:visible').slideUp();
    //Code Broken down
    //$this.children('ul:first').slideToggle();
    //$this.siblings().children('ul:visible').slideUp();
});

<强> Demo