单击时切换下拉菜单并隐藏所有其他下拉菜单

Posted 2023-05-09

【中文标题】单击时切换下拉菜单并隐藏所有其他下拉菜单

【英文标题】：Toggle dropdown menu on click and hide all other dropdown menus

【发布时间】：2018-10-13 23:58:24

【问题描述】：

我有一个包含许多父子菜单项的菜单栏：

<nav>
  <ul>
    <li class="menu-item-has-children">
      <a href="#">Parent item</a>
      <ul>
        <li><a href="#">Child item</a></li>
        <li><a href="#">Child item</a></li>
      </ul>
   </li>
   <li class="menu-item-has-children">
      <a href="#">Parent item</a>
      <ul>
        <li><a href="#">Child item</a></li>
        <li><a href="#">Child item</a></li>
      </ul>
   </li>
  </ul>
</nav>

子菜单默认隐藏：

.menu-item-has-children > ul 
  display: none;

我想实现以下目标：

单击***菜单项时，我想切换（显示/隐藏）其关联的子菜单并隐藏可能打开的任何其他子菜单。 当点击页面上除子菜单或其父项之外的任何其他位置时，我想隐藏所有子菜单。

我正在使用以下代码，但不是显示正确的子菜单，而是显示/隐藏所有子菜单：

$(document).on('click', function(e) 
  if($(e.target).parent().hasClass('menu-item-has-children'))  
    $(this).find('ul').show();
   else 
    $('.menu-item-has-children > ul').toggle();
  
);

见小提琴：https://jsfiddle.net/gs9q6kwh/

知道我做错了什么吗？

【参考方案1】：

这可以通过先隐藏所有子菜单，然后只显示与被点击的父级同级的子菜单来轻松实现：

$(document).on('click', function(e) 
  $('.menu-item-has-children > ul').hide();

  if ($(e.target).parent().hasClass('menu-item-has-children')) 
    $(e.target).siblings('ul').toggle();
  
);

.menu-item-has-children>ul 
  display: none;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul>
    <li class="menu-item-has-children">
      <a href="#">Parent item</a>
      <ul>
        <li><a href="#">Child item</a></li>
        <li><a href="#">Child item</a></li>
      </ul>
    </li>
    <li class="menu-item-has-children">
      <a href="#">Parent item</a>
      <ul>
        <li><a href="#">Child item</a></li>
        <li><a href="#">Child item</a></li>
      </ul>
    </li>
  </ul>
</nav>

【参考方案2】：

jQuery 代码有几个问题：

单击子菜单项会导致所有菜单折叠。您需要重组 jQuery 以检查这些项目以及父项目。 jQuery 正在搜索 'ul' 的所有实例并显示它们，而不仅仅是目标的子级。尝试使用 children()，而不是使用 .find()。 单击父项不会在显示和隐藏之间切换。我建议向父项添加一个类，让代码知道其状态（显示或隐藏），然后进行相应的切换。