请求为现有Accordion菜单添加下拉子菜单的技术建议

基于你现有的Accordion结构，要实现嵌套子菜单可以从HTML结构调整、CSS样式增强和JS交互逻辑修改三个方面入手，以下是具体实现方案和示例代码：

1. 调整HTML结构 #

在原Accordion的每个.accordion-item内，为需要添加子菜单的项补充嵌套结构，示例如下：

<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-title">主菜单1</div>
    <div class="accordion-content">
      <div class="sub-menu">
        <div class="sub-item">子菜单1-1</div>
        <div class="sub-item">子菜单1-2</div>
        <div class="sub-item">子菜单1-3</div>
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-title">主菜单2</div>
    <div class="accordion-content">
      <p>主菜单2的内容</p>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-title">主菜单3</div>
    <div class="accordion-content">
      <div class="sub-menu">
        <div class="sub-item">子菜单3-1</div>
        <div class="sub-item">子菜单3-2</div>
      </div>
    </div>
  </div>
</div>

2. 增强CSS样式 #

添加子菜单的默认隐藏、过渡动画及样式区分：

.accordion {
  border: 1px solid #ddd;
  border-radius: 4px;
  width: 300px;
}

.accordion-item {
  border-bottom: 1px solid #ddd;
}

.accordion-title {
  padding: 12px;
  background-color: #f5f5f5;
  cursor: pointer;
  font-weight: bold;
}

.accordion-content {
  padding: 0 12px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

/* 子菜单样式 */
.sub-menu {
  padding: 8px 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.sub-item {
  padding: 8px 16px;
  cursor: pointer;
  font-size: 0.9em;
}

.sub-item:hover {
  background-color: #f0f0f0;
}

/* 展开状态类 */
.accordion-content.active {
  max-height: 200px;
  padding: 12px;
}

.sub-menu.active {
  max-height: 150px;
}

3. 修改JS交互逻辑 #

区分主菜单和子菜单的点击事件，处理各自的展开/折叠逻辑：

const accordion = document.querySelector('.accordion');

accordion.addEventListener('click', (e) => {
  const target = e.target;
  
  // 点击主菜单标题，切换主内容展开状态
  if (target.classList.contains('accordion-title')) {
    const content = target.nextElementSibling;
    content.classList.toggle('active');
    
    // 关闭其他主菜单的展开状态（可选）
    document.querySelectorAll('.accordion-content.active')
      .forEach(item => {
        if (item !== content) item.classList.remove('active');
      });
  }
  
  // 点击子菜单标题，切换子菜单展开状态
  if (target.classList.contains('sub-item')) {
    const subMenu = target.parentElement;
    subMenu.classList.toggle('active');
    e.stopPropagation(); // 阻止事件冒泡到主菜单
  }
});

关键实现要点 #

• 使用事件委托绑定点击事件，避免给每个元素单独绑定，提升性能
• 利用CSS max-height + transition实现平滑展开/折叠动画，比直接操作display更友好
• 通过stopPropagation()防止子项点击触发父级Accordion的折叠/展开逻辑
• 保持DOM结构的嵌套合理性，便于样式和交互的层级控制

内容的提问来源于stack exchange，提问作者KIZILOV ILYA