多下拉列表交互问题：打开新列表时如何关闭已打开的下拉列表？

嘿，我来帮你搞定这个下拉菜单的问题～你现在遇到的情况是，打开新的下拉列表时，之前打开的那个不会自动收起，对吧？咱们只需要稍微修改一下你的JavaScript代码，就能实现“打开新下拉时自动关闭其他已展开下拉”的效果。

问题分析 #

你原来的代码只是对当前点击的下拉列表做了toggle()切换显示/隐藏，但没有处理页面上其他已经展开的下拉菜单，所以才会出现多个下拉同时打开的情况。

修改后的解决方案 #

JavaScript代码

$(document).ready(function() {
  $('.dropdown-submenu a.test').on("click", function(e) {
    // 定位当前点击元素对应的下拉列表
    const currentDropdown = $(this).next('ul');
    
    // 关闭所有除当前下拉外的其他已展开下拉列表
    $('.dropdown-submenu ul').not(currentDropdown).hide();
    
    // 切换当前下拉列表的显示状态（显示/隐藏）
    currentDropdown.toggle();
    
    e.stopPropagation();
    e.preventDefault();
  });

  // 可选优化：点击页面空白区域时，自动关闭所有下拉列表
  $(document).click(function() {
    $('.dropdown-submenu ul').hide();
  });
});

代码说明

• 第一步先获取当前点击按钮对应的下拉列表，避免误关当前要操作的下拉
• 然后用.not(currentDropdown)筛选出所有非当前的下拉列表，统一调用hide()关闭它们
• 最后再切换当前下拉的显示状态，这样就能保证同一时间最多只有一个下拉是展开的
• 额外添加的“点击空白区域关闭所有下拉”是常见的用户体验优化，如果不需要可以直接删掉这段代码

对应的HTML代码（补全示例结构）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
  <p class="dropdown-toggle">主下拉触发项</p>
  <div class="dropdown-submenu">
    <a href="#" class="test">子菜单1</a>
    <ul>
      <li>选项1</li>
      <li>选项2</li>
    </ul>
    <a href="#" class="test">子菜单2</a>
    <ul>
      <li>选项A</li>
      <li>选项B</li>
    </ul>
  </div>
</div>

内容的提问来源于stack exchange，提问作者Faizal Hussain