javascript - 具有嵌套子菜单的 jQuery 导航项应在单击时打开

Question

我需要在这里添加二级子菜单。

是否有动态解决方案，因此在单击链接时只打开一个子菜单？ 当单击子菜单的链接(在第一个子菜单中)时，然后打开这个？ 等等……

我已经对 jsfiddle 做了一点改动，增加了一层子级别:http://jsfiddle.net/cRsZE/363/

一级子菜单的工作示例:JSFiddle Demo

HTML:

<ul id="nav">
    <li>Home</li>
    <li class="parent">About
        <ul class="sub-nav">
            <li>Johnny</li>
            <li>Julie</li>
            <li>Jamie</li>
        </ul>
    </li>
    <li>Contact</li>
</ul>

CSS:

#nav ul.sub-nav {
    display: none;
}

#nav ul.visible {
    display: block;
}

jQuery:

$(document).ready(function() {
    $('.parent').click(function() {
        $('.sub-nav').toggleClass('visible');
    });
});

来源:Creating Drop Down Menu on click CSS

Answer 1

尝试，

CSS:

.hidden {
  display: none;
}

JS:

$('ul ul').addClass('hidden');

$(document).ready(function () {
    $('.parent').click(function (e) {
        e.stopPropagation();
        $(this).find('ul').first().toggleClass('hidden');
    });
});

DEMO