Javascript 单击以隐藏/显示带有jQuery的hree级别导航

我有一个包含三个级别的基本HTML菜单：

<ul>
    <li><a href="#"></a></li>
    <li><a href="#"></a>
        <ul class="sub-menu">
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
        </ul>
    </li>
    <li><a href="#"></a>
        <ul class="sub-menu">
            <li><a href="#"></a></li>
            <li><a href="#"></a>
                <ul class="sub-menu">
                    <li><a href="#"></a></li>
                    <li><a href="#"></a></li>
                    <li><a href="#"></a></li>
                </ul>
            </li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
        </ul>
    </li>
    <li><a href="#"></a>
        <ul class="sub-menu">
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
        </ul>
    </li>
    <li><a href="#"></a></li>
</ul>

那很好用

$（'ul li a'）。单击（函数（）{
$（this）.next（'.sub菜单'）.toggle（）；
});
































要开始仅显示顶级菜单，请使用以下CSS：

ul ul {
  display: none;
}

要仅显示相应的子菜单，请参见下面的注释：

$('ul li a').click(function() {
  $('ul ul').hide();                  //hide all ul children
  $(this).parents('ul').show();       //show all ul ancestors of the clicked anchor
  $(this).next('.sub-menu').toggle(); //toggle its submenu
});

片段：
$（'ul li a'）。单击（函数（）{
$（'ul'）.hide（）；//隐藏所有ul子级
$（this）.parents（'ul'）.show（）；//显示所单击锚的所有ul祖先
$（this）.next（'.sub-menu'）.toggle（）；//切换其子菜单
});
ul{
显示：无；
}

































是的，就是这样。非常感谢你。
$('ul li a').click(function() {
  $('ul ul').hide();                  //hide all ul children
  $(this).parents('ul').show();       //show all ul ancestors of the clicked anchor
  $(this).next('.sub-menu').toggle(); //toggle its submenu
});