我需要修改菜单，使一次只显示一个子菜单，一般情况下不能同时显示多个菜单答案

【问题标题】：I need to modify the menu so that only one sub-menu is displayed at a time, in general so that no more than one menu can be displayed at the same time我需要修改菜单，使一次只显示一个子菜单，一般情况下不能同时显示多个菜单
【发布时间】：2022-11-12 18:29:19
【问题描述】：

当我选择菜单的一个选项时，它会按原样显示，但是当我选择另一个选项时，也会显示另一个选项，其想法是同时只显示一个选项。

$('.sub-menu ul').hide();
$(".sub-menu a").click(function () {
    $(this).parent(".sub-menu").children("ul").slideToggle("200");
    $(this).find("i.fa").toggleClass("fa-angle-up fa-angle-down");
});

` 这是我在 jquery 中的代码，我需要进行更改，以便它只允许我显示一个选项而不是两个。

<nav class='animated flipInX'>
  <ul>
    <li>
      <a href='#'>
        <div class='fa fa-home'></div>
      </a>
    </li>
    <li>
      <a href='#'>
        About
      </a>
    </li>
    <li class='sub-menu'>
      <a href='#'>
        Products
        <i class='fa fa-angle-down'></i>
      </a>
      <ul>
        <li>
          <a href='#'>
            Product Item
          </a>
        </li>
        <li>
          <a href='#'>
            Product Item
          </a>
        </li>
        <li>
          <a href='#'>
            Product Item
          </a>
        </li>
      </ul>
    </li>
    <li class='sub-menu'>
      <a href='#'>
        Services
        <i class='fa fa-angle-down'></i>
      </a>
      <ul>
        <li>
          <a href='#'>
            Product Item
          </a>
        </li>
        <li>
          <a href='#'>
            Product Item
          </a>
        </li>
        <li>
          <a href='#'>
            Product Item
          </a>
        </li>
      </ul>
    </li>
    <li>
      <a href='#'>
        Contact Us
      </a>
    </li>
  </ul>
</nav>

这是html代码，请帮助我：c `

这是html代码，请帮助我：c

【问题讨论】：

您应该添加一个通用函数“closeAll”来关闭所有子菜单。在你的点击函数中，第一步你称之为closeAll。另外，您可以测试在closeAll之前单击的元素，如果它是已经打开的子菜单，您什么也不做

标签： javascript html jquery css frontend

【解决方案1】：

$(".sub-menu a").click(function () {
  $(".sub-menu ul").not($(this)).hide();
  $(this).parent(".sub-menu").children("ul").slideToggle("200");
  $(this).find("i.fa").toggleClass("fa-angle-up fa-angle-down");
});

【讨论】：