jQuery 风格手风琴不扩展所有无序列表

Question

我有一个菜单，我想使用 jQuery 创建一个手风琴风格的菜单。我遇到的问题是 jQuery。

当我点击第一个<li> 中的任何一个时，例如First Menu，它只会向上扩展下一个<ul>，而不是其中的嵌套列表。

如何编辑我的 jQuery，使其扩展父 <li> 中的所有 <ul>？

<ul id="nav">
    <li><a href="#">First Menu...</a>
    <ul>
        <li>Lorem Ipsum
        <ul>
            <li><a href="#">Lorem Ipsum</a></li>
            <li><a href="#">Lorem Ipsum</a></li>
            <li><a href="#">Lorem Ipsum</a></li>
        </ul>
        </li>
        <li>Lorem Ipsum
        <ul>
            <li><a href="#">Lorem Ipsum</a></li>
            <li><a href="#">Lorem Ipsum</a></li>
            <li><a href="#">Lorem Ipsum</a></li>
        </ul>
        </li>
        <li>Lorem Ipsum
        <ul>
            <li><a href="#">Lorem Ipsum/a></li>
            <li><a href="#">Lorem Ipsum</a></li>
            <li><a href="#">Lorem Ipsum</a></li>
        </ul>
        </li>
    </ul>
    </li>
    <li><a href="#">Second Menu...</a>
    <ul>
        <li>Lorem Ipsum
        <ul>
            <li><a href="#">Lorem Ipsum</a></li>
            <li><a href="#">Lorem Ipsum</a></li>
            <li><a href="#">Lorem Ipsum</a></li>
        </ul>
        </li>
        <li>Lorem Ipsum
        <ul>
            <li><a href="#">Lorem Ipsum</a></li>
            <li><a href="#">Lorem Ipsum</a></li>
            <li><a href="#">Lorem Ipsum</a></li>
        </ul>
        </li>
        <li>Lorem Ipsum
        <ul>
            <li><a href="#">Lorem Ipsum/a></li>
            <li><a href="#">Lorem Ipsum</a></li>
            <li><a href="#">Lorem Ipsum</a></li>
        </ul>
        </li>
    </ul>
    </li>
    <li><a href="#">Third Menu...</a>
    <ul>
        <li>Lorem Ipsum
        <ul>
            <li><a href="#">Lorem Ipsum</a></li>
            <li><a href="#">Lorem Ipsum</a></li>
            <li><a href="#">Lorem Ipsum</a></li>
        </ul>
        </li>
        <li>Lorem Ipsum
        <ul>
            <li><a href="#">Lorem Ipsum</a></li>
            <li><a href="#">Lorem Ipsum</a></li>
            <li><a href="#">Lorem Ipsum</a></li>
        </ul>
        </li>
        <li>Lorem Ipsum
        <ul>
            <li><a href="#">Lorem Ipsum/a></li>
            <li><a href="#">Lorem Ipsum</a></li>
            <li><a href="#">Lorem Ipsum</a></li>
        </ul>
        </li>
    </ul>
    </li>
</ul>

jQuery

$(document).ready(function(){
    $("#nav > li > a").on("click", function(e) {
        if($(this).parent().has("ul")) {
            e.preventDefault();
        }

        if(!$(this).hasClass("open")) {
            // hide any open menus and remove all other classes
            $("#nav li ul").slideUp(350);
            $("#nav li a").removeClass("open");

            // open our new menu and add the open class
            $(this).next("ul").slideDown(350);
            $(this).addClass("open");
        }

        else if($(this).hasClass("open")) {
            $(this).removeClass("open");
            $(this).next("ul").slideUp(350);
        }
    });
});

Answer 1

我建议你使用 jquery UI 的默认accordin

http://jqueryui.com/accordion/