单击以使用 jQuery 隐藏/显示三层导航

Question

我有一个包含三个级别的基本 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').click(function() {
    $(this).next('.sub-menu').toggle();
});

效果很好。

$('ul li a').click(function() {
  $(this).next('.sub-menu').toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a>
      <ul class="sub-menu">
          <li><a href="#">2.1</a></li>
          <li><a href="#">2.2</a></li>
          <li><a href="#">2.3</a></li>
      </ul>
  </li>
  <li><a href="#">3</a>
      <ul class="sub-menu">
          <li><a href="#">3.1</a></li>
          <li><a href="#">3.2</a>
              <ul class="sub-menu">
                  <li><a href="#">3.2.1</a></li>
                  <li><a href="#">3.2.2</a></li>
                  <li><a href="#">3.2.3</a></li>
              </ul>
          </li>
          <li><a href="#">3.3</a></li>
          <li><a href="#">3.4</a></li>
      </ul>
  </li>
  <li><a href="#">4</a>
      <ul class="sub-menu">
          <li><a href="#">4.1</a></li>
          <li><a href="#">4.2</a></li>
          <li><a href="#">4.3</a></li>
      </ul>
  </li>
  <li><a href="#">5</a></li>
</ul>

问题是子菜单不会隐藏，除非您再次单击它们（切换）。

我希望一次只显示一个导航项，并且它是子菜单。

我需要的是每个不是被点击隐藏的顶级导航项的子菜单的子菜单。

Answer 1

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

ul ul {
  display: none;
}

要仅显示适当的子菜单，请参阅下面的 cmets：

$('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').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 ul {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 

<ul>
    <li><a href="#">Test 1</a></li>
    <li><a href="#">Test 2</a>
        <ul class="sub-menu">
            <li><a href="#">Test 2a</a></li>
            <li><a href="#">Test 2b</a></li>
            <li><a href="#">Test 2c</a></li>
        </ul>
    </li>
    <li><a href="#">Test 3</a>
        <ul class="sub-menu">
            <li><a href="#">Test 3a</a></li>
            <li><a href="#">Test 3b</a>
                <ul class="sub-menu">
                    <li><a href="#">Test 3b 1</a></li>
                    <li><a href="#">Test 3b 2</a></li>
                    <li><a href="#">Test 3b 3</a></li>
                </ul>
            </li>
            <li><a href="#">Test 3c</a></li>
            <li><a href="#">Test 3d</a></li>
        </ul>
    </li>
    <li><a href="#">Test 4</a>
        <ul class="sub-menu">
            <li><a href="#">Test 4a</a></li>
            <li><a href="#">Test 4b</a></li>
            <li><a href="#">Test 4c</a></li>
        </ul>
    </li>
    <li><a href="#">Test 5</a></li>
</ul>