如何设置子下拉菜单默认折叠并修复多级下拉展开异常问题

嘿，这个问题我之前也碰到过！核心原因是你切换主下拉菜单的时候，没有重置子菜单的状态——之前展开的子菜单会保持打开状态，下次主菜单一打开就全出来了。下面是具体的修复方案，一步步来：

1. 先确保子菜单初始状态为折叠 #

首先在HTML结构里，给所有子菜单容器和子内容默认加上closed类，这样页面刚加载时它们就是折叠状态：

<style>
.closed{display:none;} 
.opened{display:block;}
/* 给切换按钮加个光标样式，提升交互感 */
.dropdown-toggle, .sub-dropdown-toggle {
  cursor: pointer;
}
</style>

<div class="dropdown">
  <p class="dropdown-toggle" type="" data-toggle="dropdown" style="padding: 15px 0px;font-size: 24px;">
    <i class="fas fa-bars"></i> 主菜单
  </p>
  <!-- 子菜单1 -->
  <div class="sub-dropdown closed">
    <p class="sub-dropdown-toggle">子菜单1</p>
    <div class="sub-menu closed">子菜单1的内容</div>
  </div>
  <!-- 子菜单2 -->
  <div class="sub-dropdown closed">
    <p class="sub-dropdown-toggle">子菜单2</p>
    <div class="sub-menu closed">子菜单2的内容</div>
  </div>
</div>

2. 优化JavaScript逻辑，重置子菜单状态 #

关键是在点击主菜单切换显示/隐藏时，强制把所有子菜单都重置为折叠状态。用原生JS实现的话，代码如下：

// 主菜单切换逻辑
const mainToggle = document.querySelector('.dropdown-toggle');
const dropdownContainer = document.querySelector('.dropdown');

mainToggle.addEventListener('click', function() {
  // 切换主下拉菜单的显示状态
  const isMainOpened = dropdownContainer.classList.toggle('opened');
  
  // 如果主菜单被打开，立刻把所有子菜单重置为折叠
  if (isMainOpened) {
    const allSubDropdowns = dropdownContainer.querySelectorAll('.sub-dropdown');
    const allSubMenus = dropdownContainer.querySelectorAll('.sub-menu');
    
    allSubDropdowns.forEach(item => {
      item.classList.add('closed');
      item.classList.remove('opened');
    });
    allSubMenus.forEach(item => {
      item.classList.add('closed');
      item.classList.remove('opened');
    });
  }
});

// 子菜单切换逻辑（阻止事件冒泡，避免误触主菜单）
const subToggles = document.querySelectorAll('.sub-dropdown-toggle');
subToggles.forEach(toggle => {
  toggle.addEventListener('click', function(e) {
    e.stopPropagation(); // 关键：阻止事件向上传递到主菜单
    const parentDropdown = this.parentElement;
    const subMenu = parentDropdown.querySelector('.sub-menu');
    
    // 切换当前子菜单的展开/折叠状态
    parentDropdown.classList.toggle('closed');
    parentDropdown.classList.toggle('opened');
    subMenu.classList.toggle('closed');
    subMenu.classList.toggle('opened');
  });
});

核心修复点说明 #

• 初始折叠：所有子菜单默认加closed类，页面加载就处于折叠状态。
• 主菜单打开时重置：每次打开主菜单，强制把所有子菜单恢复为折叠，彻底避免之前的展开状态残留。
• 阻止事件冒泡：子菜单点击时阻止事件向上传递，防止误触发主菜单的切换逻辑。

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