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应该显示但是任何兄弟的应该关闭。

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

逐步揭示jQuery

1 个答案: