Question

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

当我点击第一个<li>中的任何一个时，例如第一个菜单，它只展开下一个<ul>而不是内嵌的嵌套列表。

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

<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的默认手风琴

http://jqueryui.com/accordion/

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

1 个答案: