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');
    });
});

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

1 个答案:

DEMO