html 我需要关闭菜单,我添加了不同时打开两个以上子菜单的选项,但现在总是有一个保持打开状态

iovurdzv  于 2022-11-20  发布在  其他
关注(0)|答案(2)|浏览(151)

当添加一次仅打开一个子菜单的选项时,它生成了一个错误,即只能始终打开一个子菜单,我不明白原因,我附上了一个测试图像。
enter image description hereenter image description here显示器
正如你可以看到,当一个点击它显示菜单,但如果我再次点击它不关闭,但它再次打开,在图像中,你看到关闭的箭头“”向上箭头,当子菜单打开箭头改变向下“",我说这是为了显示菜单永远不会关闭的错误。
这是html代码

<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>

This is the js code

$(".sub-menu ul").hide()
$(".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");
});

'我请求帮助解决这个问题,想法是让你关闭正常的菜单但不改变功能不能同时打开一个以上的菜单。
我尝试了许多jquery选项,但我还不明白错误。

62lalag4

62lalag42#

一个简单的解决方案,用一个stack来跟踪打开的项目。很容易改变允许同时打开的子菜单的数量。唯一增加的是open类(和相应的CSS)。
第一个

相关问题