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 は閉じます。