CSS DEVELOPMENT LAB · 09

Accordion 手风琴

FAQ、产品参数、服务流程、分类导航都经常使用手风琴。 本实验重点研究：不用计算内容高度，如何让展开动画稳定、结构清晰、手机端也好用。

CORE DEMO

一次只展开一个项目

默认展开第一项。点击其他标题后，当前项打开，其余项自动关闭。 再次点击当前项不会折叠，确保始终至少保留一个展开状态。

CSS 负责展开高度、箭头旋转、边框与动画
JavaScript 只负责切换 `.is-open` 与 ARIA 状态

固定 `max-height: 500px` 虽然简单，但内容变化后可能不够高， 或者动画时间与真实内容高度不匹配。本实验使用 Grid 的 `grid-template-rows: 0fr → 1fr` 来完成展开。

如果 JavaScript 每次都读取 `scrollHeight` 再写入像素高度， 逻辑会更复杂，也会让布局和交互耦合。本实验只让 JS 管状态， CSS 自己处理视觉展开。

最常见的是 FAQ、WooCommerce 产品说明、技术参数、服务流程、 左侧分类、招聘职位、帮助中心，以及手机端需要折叠的大段内容。

不需要。JavaScript 会自动寻找容器里的所有 `.accordion-trigger`。 后期只要复制一组 HTML，并保证 `id` 与 `aria-controls` 对应即可。

KEY TECHNIQUE

用 Grid 做“自动高度”的展开动画

.accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
}

.accordion-item.is-open
.accordion-panel {
  grid-template-rows: 1fr;
}

.accordion-panel-inner {
  overflow: hidden;
}

COMMON USE CASES

最常见的应用场景

FAQ

帮助中心、售前问题、售后说明。

Product

产品参数、安装说明、下载资料。

Process

服务流程、步骤说明、项目阶段。

Navigation

手机分类、左侧目录、多级菜单。