折叠面板
Collapse
UI 组件也叫：手风琴、Accordion、展开收起、可折叠面板
一句话：一组可以点击标题展开或收起内容的面板，用来把较长的内容分段收纳，按需查看。
详细解释
折叠面板把内容分成若干段，每段只显示一行标题，旁边有箭头；点击标题展开下面的内容，再点一次收起。如果设置成「同一时间只能展开一段」，就叫手风琴（Accordion）。常见于常见问题（FAQ）、设置页的高级选项、商品详情的规格参数。HTML 原生的 <details> 和 <summary> 就能做出最简单的折叠效果。
它和 标签页 最容易混淆：标签页把几块内容横向并排，同一时间只看一块，适合几块内容地位相当、用户会来回切换；折叠面板纵向排列，可以同时展开多段对照，也更适合手机竖屏。内容只有三五行时，直接平铺比折叠起来更好找。
示例
灰度线框示意，只表达结构，不代表具体视觉风格。
怎么跟 AI 说
可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。
做一个常见问题折叠面板：每个问题一行，右侧有向下箭头，点击问题展开答案、箭头旋转 180 度，展开收起带高度过渡动画；默认全部收起，同一时间只展开一个（手风琴模式），整行标题都可点击，并支持键盘操作。
结构与适用场景
结构描述
由多个纵向排列的面板组成，每个面板有可点击的标题行（含箭头）和可展开收起的内容区。
适用场景
- 常见问题这类一问一答、用户只关心其中几条的内容
- 设置页里的高级选项，默认不需要看，需要时再展开
- 手机端内容较长，需要分段收纳以减少滚动
- 需要同时展开两段内容对照查看时
不适用场景
- 几块内容地位相当、用户会频繁来回切换，用标签页更直接
- 内容本身很短，折叠起来反而要多点一次
- 用户需要一眼扫完全部信息，比如关键参数对比
常见坏用法
- 把页面最重要的信息折叠起来，用户根本注意不到
- 只有箭头图标能点，点整行标题没有反应
- 折叠面板里再嵌套折叠面板，层级过深找不到内容
识别特征
- 纵向排列的一组标题行，每行一侧有箭头
- 其中一行展开，下面露出一段内容，箭头方向与其他行不同
- 各标题行之间有细分割线或边框
DOM 线索
插件本地识别时匹配的 CSS 选择器（标签、ARIA role、常见组件库 class）。
details.ant-collapse.el-collapse[class*="MuiAccordion-root"].arco-collapse.t-collapse.n-collapse[data-slot="accordion"].accordion