如何用HTML5/CSS/JavaScript实现嵌套手风琴？嵌套组件不生效

我之前跟着同款教程做手风琴的时候，也踩过嵌套手风琴的坑！原教程的JS代码是给所有.accordion按钮绑定点击事件，但没考虑嵌套场景下的事件冒泡和层级问题，所以内层的手风琴总是和外层“打架”。给你分享个亲测有效的修改方案：

第一步：调整HTML结构（不用大改） #

保持嵌套的层级结构就行，不用额外加复杂的类，当然如果想区分层级加个类也可以：

<!-- 外层手风琴 -->
<button class="accordion">外层手风琴标题</button>
<div class="panel">
  <p>外层手风琴的内容区域</p>
  <!-- 嵌套的内层手风琴 -->
  <button class="accordion">内层手风琴标题</button>
  <div class="panel">
    <p>内层手风琴的内容，终于能正常展开收起啦！</p>
  </div>
</div>

第二步：替换原教程的JS代码 #

原代码的问题在于事件绑定太“全局”，而且没处理冒泡。换成下面的事件委托写法，既能解决嵌套冲突，还支持后续动态添加的手风琴：

// 用事件委托监听整个文档的点击事件
document.addEventListener('click', function(e) {
  // 只处理点击了.accordion按钮的情况
  if (e.target.classList.contains('accordion')) {
    // 关键：阻止事件冒泡，不让外层手风琴触发点击逻辑
    e.stopPropagation();
    
    const currentBtn = e.target;
    // 切换按钮的active状态
    currentBtn.classList.toggle('active');
    const panel = currentBtn.nextElementSibling;
    
    // 用maxHeight实现平滑展开/收起，比直接改display更丝滑
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      // 用scrollHeight获取内容的实际高度，适配动态内容
      panel.style.maxHeight = panel.scrollHeight + 'px';
    }
  }
});

第三步：优化CSS（可选但推荐） #

给嵌套的手风琴加个缩进，让层级更清晰，同时配合JS的maxHeight添加过渡动画：

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: background-color 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc;
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  /* 添加过渡动画，展开收起更流畅 */
  transition: max-height 0.2s ease-out;
}

/* 嵌套手风琴缩进，区分层级 */
.panel .accordion {
  width: calc(100% - 20px);
  margin-left: 20px;
}

这样修改后，不管嵌套多少层手风琴，点击内层的时候都只会触发当前层级的展开/收起，不会影响外层，完美适配你的需求！

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