用于多个嵌套列表的 jQuery 手风琴答案

【问题标题】：jQuery accordion for multiple nested lists用于多个嵌套列表的 jQuery 手风琴
【发布时间】：2014-04-13 09:04:29
【问题描述】：

我正在努力合并我的菜单的第二个嵌套列表，以便它们可以打开 onclick。下面是我的代码。

另外，我怎样才能使点击展开列表不会触发任何其他事件？现在，如果您单击它们，我的整个菜单将从另一个脚本中关闭（这是用于移动响应菜单）因此，如果我的菜单项 li 有一个嵌套列表，我希望单击仅打开或关闭其嵌套列表并执行没有别的。

http://jsfiddle.net/notanothercliche/36vCh/

<ul class="menu" id="menu-menu">

    <li class="menu-item>Home</li> <!-- end Home menu-item -->

    <li class="menu-item>Properties

    <ul class="dropdown-menu">

        <li class="menu-item>Dubai

        <ul class="dropdown-menu">

            <li class="menu-item>Residential

            <ul class="dropdown-menu">

                <li class="menu-item>Apartments</li>

                <li class="menu-item>Villas</a></li>

            </ul> <!-- end Residential dropdown-menu -->

                </li> <!-- end Residential menu-item -->

        </ul> <!-- end Dubai dropdown-menu -->

        </li> <!-- end Dubai menu-item -->

    </ul> <!-- end Properties dropdown-menu -->

    </li> <!-- end Properties menu-item -->

</ul> <!-- end menu-menu -->

【问题讨论】：

请注意，锚点必须具有非空的href 属性。

标签： jquery navigation accordion

【解决方案1】：

你不必那么努力。可能不需要像你一样操作类。

http://jsfiddle.net/isherwood/36vCh/6

jQuery("#menu-menu a").on("click", function (e) {
    if (jQuery(this).parent().has("ul")) {
        e.preventDefault();
    }
    $(this).next('ul').slideToggle();
});

请注意，我添加了一些缺少的引号和必需的 href 属性。

【讨论】：