CSS DEVELOPMENT LAB · 09

Accordion 手风琴

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

CORE DEMO

一次只展开一个项目

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

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

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

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

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