如何在jQuery移动端下拉菜单中实现子菜单自动关闭？

问题 #

制作移动端jQuery下拉菜单时，使用toggle()方法显示/隐藏子菜单，但点击某个菜单项时，其他已展开的子菜单不会自动关闭——比如点击"Solutions"时，"About Us"的子菜单仍保持展开状态。

解决方案 #

不需要为每个菜单单独绑定事件，通过统一类选择器处理，实现点击时先关闭所有非当前子菜单，再切换当前子菜单的显示状态：

修改后的HTML #

给所有父菜单项添加统一的parent-menu类，子菜单添加统一的submenu类，避免冗余类名，同时修正原HTML中的标签闭合错误：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu-menu" class="menu dropdown-menu">
  <li class="parent-menu menuone"><a href="#"> About Us</a>
    <ul class="submenu submenuone">
      <li>Company Overview</li>
    </ul>
  </li>
  <li class="parent-menu menutwo"><a href="#">Solutions</a>
    <ul class="submenu submenutwo">
      <li> Receivable Finance and Collections</li>
      <li> Workers Comp Financing</li>
    </ul>
  </li>
  <li class="parent-menu menuthree"><a href="#">Provider Type</a>
    <ul class="submenu submenuthree">
      <li> Doctors</li>
      <li> Pharmacy</li>
    </ul>
  </li>
</ul>

修改后的JS代码 #

jQuery(document).ready(function($) {
  // 给所有父菜单绑定统一点击事件
  $(".parent-menu").click(function() {
    // 定位当前点击菜单对应的子菜单
    var currentSubmenu = $(this).find(".submenu");
    // 关闭所有非当前的子菜单
    $(".submenu").not(currentSubmenu).slideUp(200);
    // 切换当前子菜单的显示状态
    currentSubmenu.slideToggle(200);
  });
});

代码说明 #

• 用parent-menu统一绑定事件，避免重复代码，后续新增菜单无需额外编写事件逻辑
• $(this).find(".submenu")精准定位当前点击菜单下的子菜单
• $(".submenu").not(currentSubmenu).slideUp(200)：关闭所有不属于当前菜单的子菜单
• 用slideToggle()替代toggle()，保持动画效果的同时更明确滑动切换的行为

内容的提问来源于stack exchange，提问作者Nazmul Hassan