如何不使用Bootstrap，仅用纯CSS实现Accordion手风琴组件？

下面给你两种纯CSS实现手风琴的可靠方案，全程无需JavaScript：

方案一：利用原生details/summary元素（最简实现） #

这是浏览器原生支持的折叠组件，基础功能零额外代码，还能自定义样式适配需求：

<details class="accordion-item">
  <summary class="accordion-header">手风琴标题1</summary>
  <div class="accordion-content">
    这里是展开后的内容，支持任意HTML元素——文本、图片、列表都能放。
  </div>
</details>

<details class="accordion-item">
  <summary class="accordion-header">手风琴标题2</summary>
  <div class="accordion-content">
    原生组件自带键盘交互支持，按Tab可切换面板，Enter能触发展开/收起， accessibility表现更好。
  </div>
</details>

自定义外观的CSS代码：

.accordion-item {
  margin-bottom: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
}

.accordion-header {
  padding: 12px 16px;
  background-color: #f5f5f5;
  cursor: pointer;
  font-weight: 500;
  list-style: none; /* 移除默认三角符号 */
}

/* 自定义展开/收起图标 */
.accordion-header::before {
  content: "+";
  margin-right: 8px;
  transition: transform 0.2s;
}

.accordion-item[open] .accordion-header::before {
  transform: rotate(45deg);
}

.accordion-content {
  padding: 12px 16px;
  border-top: 1px solid #eee;
}

方案二：利用Checkbox伪类（更灵活的交互控制） #

如果需要点击面板任意区域都能触发展开/收起，或者更精细的动画控制，可以用隐藏的checkbox做状态触发器：

<div class="accordion-item">
  <input type="checkbox" id="accordion-1" class="accordion-toggle">
  <label for="accordion-1" class="accordion-header">手风琴标题1</label>
  <div class="accordion-content">
    点击标题或面板空白处都能切换状态，适合需要扩大触发范围的场景。
  </div>
</div>

<div class="accordion-item">
  <input type="checkbox" id="accordion-2" class="accordion-toggle">
  <label for="accordion-2" class="accordion-header">手风琴标题2</label>
  <div class="accordion-content">
    可以通过调整max-height数值适配内容高度，实现平滑的展开收起动画。
  </div>
</div>

对应的CSS样式：

.accordion-toggle {
  display: none; /* 隐藏原生checkbox */
}

.accordion-item {
  margin-bottom: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
}

.accordion-header {
  display: block;
  padding: 12px 16px;
  background-color: #f5f5f5;
  cursor: pointer;
  font-weight: 500;
  position: relative;
}

.accordion-header::after {
  content: ">";
  position: absolute;
  right: 16px;
  transition: transform 0.2s;
}

/* 选中状态下切换图标并显示内容 */
.accordion-toggle:checked + .accordion-header::after {
  transform: rotate(90deg);
}

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

.accordion-toggle:checked ~ .accordion-content {
  max-height: 200px; /* 根据实际内容高度调整，现代浏览器可用fit-content */
  padding: 12px 16px;
  border-top: 1px solid #eee;
}

关键注意点 #

• 方案一的原生组件自带无障碍支持，适合对兼容性和 accessibility有要求的场景
• 方案二的max-height过渡需要设置足够覆盖内容的数值，避免截断；现代浏览器也可直接用fit-content
• 两种方案都能通过CSS快速调整颜色、间距、动画速度，适配不同设计风格

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