如何在HTML中实现折叠面板嵌套，将项目页面内容按阶段分组展示

实现方案 #

你现有的折叠逻辑本身就支持多级嵌套，只需要调整HTML结构把项目按阶段分组即可，不需要大改现有代码。

1. HTML 调整 #

把你原来的项目按钮按所属阶段，包裹到对应阶段折叠按钮的.content容器里就行，示例结构如下：

<article>
  <!-- 阶段1折叠按钮 -->
  <button class="collapsible phase-btn">阶段1</button>
  <div class="content">
    <!-- 阶段1下的所有项目折叠按钮 -->
    <button class="collapsible">Pc assembleren en instaleren</button>
    <div class="content">
      <h1>Pc assembleren en instaleren</h1>
      <img src="IMG_9354.jpg" width="400px" height="300px">
      <img src="IMG_9357.jpg" width="400px" height="300px">
      <img src="IMG_9358.jpg" width="400px" height="300px">
    </div>
    <button class="collapsible">Website</button>
    <div class="content">
      <h1>Website</h1>
      <img src="Schermafbeelding%202021-11-03%20113631.jpg" width="400px" height="300px">
      <img src="Schermafbeelding%202.jpg" width="400px" height="300px">
    </div>
  </div>

  <!-- 阶段2折叠按钮 -->
  <button class="collapsible phase-btn">阶段2</button>
  <div class="content">
    <!-- 阶段2下的项目 -->
    <button class="collapsible">Ergotimer</button>
    <div class="content">
      <h1>Ergotimer</h1>
      <img src="IMG_9189.jpg" width="400px" height="300px">
      <img src="IMG_9193.jpg" width="400px" height="300px">
    </div>
    <button class="collapsible">Bedrijfsvideo</button>
    <div class="content">
      <h1>Bedrijfsvideo</h1>
      <img src="Afbeelding2.jpg" width="400px" height="300px">
      <img src="Afbeelding3.jpg" width="400px" height="300px">
    </div>
  </div>

  <!-- 阶段3、4以此类推 -->
  <button class="collapsible phase-btn">阶段3</button>
  <div class="content">
    <button class="collapsible">Documentatie</button>
    <div class="content">
      <h1>Documentatie</h1>
      <img src="Afbeelding1.jpg" width="400px" height="300px">
      <img src="WhatsApp%20Image%202021-11-03%20at%2012.54.38.jpeg" width="400px" height="300px">
    </div>
  </div>
</article>

2. 可选CSS调整（区分阶段按钮和项目按钮） #

你可以给阶段按钮加单独的样式，和内层的项目按钮做视觉区分，在现有CSS后面加这段就行：

/* 阶段折叠按钮样式 */
.phase-btn {
  background-color: #00365e;
  color: #fff;
  font-size: 22px;
  font-weight: bold;
}
.phase-btn.active, .phase-btn:hover {
  background-color: #002038;
}

3. JS 代码无需修改 #

你现有的JS逻辑是通用的，只要是带collapsible类的按钮点击后都会操作相邻的.content容器，不管嵌套多少级都能正常生效，展开上级阶段时内层项目的折叠状态也会保留。

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