多个嵌套列表的 jQuery 手风琴 [英] jQuery accordion for multiple nested lists

问题描述

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

I'm struggling to incorporate the second nested list of my menu so that they can open onclick. Below is my code.

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

Also, how can I make it so clicking to expand a list doesn't trigger any other events? Right now if you click them, my entire menu slides closed from another script (this is for a mobile responsive menu) So if my menu-item li has a nested list, I want the click to ONLY open or close its nested list and do nothing else.

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 -->

推荐答案

你不必那么努力.可能没有必要像你一样操作类.

You don't have to work so hard. There's probably no need to manipulate classes like you are.

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 属性.

Note that I added a few missing quotes and required href attributes.

这篇关于多个嵌套列表的 jQuery 手风琴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！