嵌套Accordion手风琴内层点击无响应及多实例代码精简优化咨询

优化思路 #

你之前的实现冗余的核心原因是把不同样式的手风琴拆成了完全独立的类体系，实际上手风琴的交互逻辑完全一致，只有背景图、尺寸这类样式属性有差异，完全可以抽离公共逻辑，仅差异化处理样式部分，嵌套场景也不需要单独适配。

优化后代码 #

CSS代码 #

/* 所有手风琴公共样式 */
.accordion {
  background-repeat: no-repeat;
  background-position: 50% 50%;
  border: none;
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}
.accordion.active,
.accordion:hover {
  background-color: #ccc;
}
.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}
.accordion.active:after {
  content: "\2212";
}
/* 所有面板公共样式 */
.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

/* 不同手风琴的差异化样式，新增只需要加对应的类即可 */
.acc-type-1 {
  background-image: url(https://i.imgur.com/Jqsaukf.png);
  height: 50px;
}
.acc-type-2 {
  background-image: url(https://i.imgur.com/VXlZ0Ja.png);
  height: 500px;
}

JS代码 #

仅需要一套事件绑定，支持任意数量、任意层级嵌套的手风琴：

const accList = document.querySelectorAll(".accordion");
accList.forEach(acc => {
  acc.addEventListener("click", function() {
    this.classList.toggle("active");
    const panel = this.nextElementSibling;
    panel.style.maxHeight = panel.style.maxHeight ? null : `${panel.scrollHeight}px`;
  });
});

HTML代码 #

所有手风琴共用accordion类，加对应的类型类即可，面板统一用panel类，嵌套也能正常工作：

<h2>Accordion with symbols</h2>
<p>In this example we have added a "plus" sign to each button. When the user clicks on the button, the "plus" sign is replaced with a "minus" sign.</p>

<button class="accordion acc-type-1"></button>
<div class="panel">
  <button class="accordion acc-type-2"></button>
  <div class="panel">
    <p>Lorem ipsum dolor sit amet</p>
  </div>
</div>
<br>
<button class="accordion acc-type-1"></button>
<div class="panel">
  <p><img src="https://i.imgur.com/Jqsaukf.png" alt="Italian Trulli"></p>
</div>

<button class="accordion acc-type-1"></button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

批量生成手风琴实例方法 #

如果需要批量生成10个以上不同配置的手风琴，可以先定义配置数组，再批量生成对应的样式和DOM：

// 手风琴配置数组，新增只需要往里面加配置项即可
const accConfigs = [
  { imgUrl: 'https://i.imgur.com/Jqsaukf.png', height: 50 },
  { imgUrl: 'https://i.imgur.com/VXlZ0Ja.png', height: 500 },
  // 更多配置直接追加即可
]

// 批量生成差异化CSS规则
const style = document.createElement('style')
accConfigs.forEach((config, index) => {
  style.innerHTML += `
    .acc-type-${index} {
      background-image: url(${config.imgUrl});
      height: ${config.height}px;
    }
  `
})
document.head.appendChild(style)

// 如果需要批量生成DOM也可以遍历配置数组创建元素插入页面

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