在实际项目中，FAQ、设置面板、折叠说明等场景经常会用到手风琴（Accordion）效果。很多实现方式依赖 JavaScript，但实际上，HTML 原生的 <details> + <summary> 标签已经可以完成大部分需求。

本文将基于一段完整示例代码，讲解如何仅使用 HTML + CSS 实现一个现代感十足、交互友好的手风琴组件。

---

一、整体效果说明

这个手风琴组件具备以下特点：

• 使用原生 <details> / <summary>，无 JS 依赖
• 支持默认展开项
• 使用 name 属性实现“互斥展开”
• 暗色系 UI，适合博客或技术站点
• 箭头旋转、边框高亮等细节交互
• 代码结构清晰，易于二次封装

---

二、HTML 结构解析

1️⃣ 基础结构

核心结构如下：

<section class="acc">
  <h2 class="acc__title">常见问题</h2>

  <details class="acc__item" open name="qa">
    <summary class="acc__summary">
      这个博客主要写什么内容？
    </summary>
    <div class="acc__content">
      <p>这里主要记录我在工作和学习中的一些思考...</p>
    </div>
  </details>
</section>

2️⃣ 为什么选择 <details> 和 <summary>

• 语义化强：天然表达“可展开内容”
• 自带交互：点击即可展开/收起
• 可访问性好：对键盘和屏幕阅读器友好
• 支持 open 属性：控制默认展开状态

---

三、关键技巧：只允许展开一个（互斥效果）

代码中所有 <details> 都有同一个 name：

<details class="acc__item" name="qa">

这是 HTML 的一个冷门但非常好用的特性：

当多个 <details> 具有相同的 name 时，浏览器会自动保证同一时间只有一个处于展开状态。

这意味着：

• ❌ 不需要 JS 控制
• ✅ 天然支持手风琴互斥行为
• ⚠️ 目前主流现代浏览器已支持（Chrome / Edge / Firefox）

---

四、CSS 样式设计拆解

1️⃣ 容器样式（卡片感）

.acc {
  max-width: 720px;
  border-radius: 30px;
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgb(0 0 0 / .35);
}

特点：

• 使用 backdrop-filter 实现毛玻璃效果
• 圆角 + 阴影，符合现代 UI 设计趋势
• 适合博客正文区域直接使用

---

2️⃣ 去除 summary 默认箭头

.acc__summary::marker {
  font-size: 0;
}

<summary> 默认会显示一个三角箭头，通过隐藏 marker，可以完全自定义样式。

---

3️⃣ 自定义箭头 + 动画

.acc__summary::after {
  content: "";
  position: absolute;
  right: 12px;
  width: 1em;
  height: 1em;
  background: url(./img/arrow.svg) no-repeat center / 12px 12px;
  transform: rotate(90deg);
  transition: transform .2s;
}

.acc__item[open] .acc__summary::after {
  transform: rotate(180deg);
}

核心点：

• 使用伪元素 ::after 作为箭头
• 通过 [open] 属性判断当前状态
• transform + transition 实现顺滑旋转动画

---

4️⃣ 展开态的视觉区分

.acc__item[open] .acc__summary {
  border-bottom: 1px solid rgb(255 255 25 / .15);
}

让用户明确感知当前展开项，这是一个非常容易被忽略、但体验提升明显的细节。

---

五、内容区域样式

.acc__content {
  padding: 12px;
}

.acc__content p {
  line-height: 1.7;
}

重点只有一个：可读性优先
没有复杂动画，避免内容抖动，适合长文本阅读。

---

六、这种方案适合哪些场景？

推荐使用场景：

• 博客 FAQ / 常见问题
• 产品说明折叠区
• 设置面板
• 文档目录 / 说明展开

不太适合：

• 需要复杂动画时间轴的场景
• 需要在展开前做逻辑判断的交互（此时才考虑 JS）

---

七、总结

这个手风琴实现的核心价值在于：

• 回归 HTML 本身的能力
• 减少不必要的 JavaScript
• 结构语义清晰，维护成本低
• 样式与交互解耦，易于扩展

在很多“看似必须 JS 才能完成”的交互中，其实 HTML + CSS 已经足够优雅。
理解并善用这些原生能力，往往能让代码更简洁，也更耐用。

---

技术并不总是“越复杂越高级”，有时候，恰到好处才是最难的部分。