0

我有嵌套的无序列表。

<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 都应该关闭。

4

1 回答 1

3

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

尝试：

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

演示

如果你想在点击它的兄弟时向上滑动，

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

演示

于 2013-11-14T22:59:24.283 回答