如何实现点击打开新下拉菜单时关闭已打开的下拉菜单

你的核心问题是代码逻辑错误：在非移动端分支里，你试图移除this.previousElementSibling的dropdown-active类，但这个元素并不是其他已打开的下拉菜单容器，而是当前点击元素的前一个兄弟节点，完全不符合需求。

修正思路很简单：点击任意下拉菜单按钮时，先关闭所有已处于激活状态的下拉菜单，再处理当前菜单的显示/隐藏。

修正后的代码如下：

on('click', '.navbar .dropdown > a', function(e) {
  const navbar = select('#navbar');
  // 关闭所有已打开的下拉菜单
  document.querySelectorAll('.dropdown-active').forEach(activeDropdown => {
    activeDropdown.classList.remove('dropdown-active');
  });

  if (navbar.classList.contains('navbar-mobile')) {
    e.preventDefault();
    // 移动端下切换当前下拉菜单的状态（点击同一按钮可关闭）
    this.nextElementSibling.classList.toggle('dropdown-active');
  } else {
    // 非移动端下直接激活当前下拉菜单
    this.nextElementSibling.classList.add('dropdown-active');
  }
}, true);

代码说明： #

• 新增全局移除dropdown-active类的逻辑：通过document.querySelectorAll('.dropdown-active')获取所有已打开的下拉容器，遍历移除激活类，确保只有当前点击的下拉能处于打开状态。
• 移动端保留toggle逻辑，支持点击同一按钮关闭菜单；非移动端如果需要支持点击关闭，也可以把add改成toggle，根据你的需求调整。

内容的提问来源于stack exchange，提问作者Jefferson Santos