跳到主要内容
Termlib

UI 组件 · 布局容器

折叠面板

Collapse

也叫：手风琴、Accordion、展开收起、可折叠面板

一组可以点击标题展开或收起内容的面板，用来把较长的内容分段收纳，按需查看。

点「标注」看每个部分叫什么。

怎么跟 AI 说

改成你的业务内容再发

做一个常见问题折叠面板：每个问题一行，右侧有向下箭头，点击问题展开答案、箭头旋转 180 度，展开收起带高度过渡动画；默认全部收起，同一时间只展开一个（手风琴模式），整行标题都可点击，并支持键盘操作。

发给

01判断

你的内容是这样吗？

对照两列，确认折叠面板是不是你要找的。

符合这些情况，用折叠面板

  • 常见问题这类一问一答、用户只关心其中几条的内容
  • 设置页里的高级选项，默认不需要看，需要时再展开
  • 手机端内容较长，需要分段收纳以减少滚动
  • 需要同时展开两段内容对照查看时

是这些情况，换成别的

  • 几块内容地位相当、用户会频繁来回切换

    改用标签页

  • 内容本身很短，折叠起来反而要多点一次

  • 用户需要一眼扫完全部信息，比如关键参数对比

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    把页面最重要的信息折叠起来，用户根本注意不到

  2. 02

    只有箭头图标能点，点整行标题没有反应

  3. 03

    折叠面板里再嵌套折叠面板，层级过深找不到内容

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由多个纵向排列的面板组成，每个面板有可点击的标题行（含箭头）和可展开收起的内容区。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1纵向排列的一组标题行，每行一侧有箭头
  2. 2其中一行展开，下面露出一段内容，箭头方向与其他行不同
  3. 3各标题行之间有细分割线或边框

04解释

详细解释

折叠面板把内容分成若干段，每段只显示一行标题，旁边有箭头；点击标题展开下面的内容，再点一次收起。如果设置成「同一时间只能展开一段」，就叫手风琴（Accordion）。常见于常见问题（FAQ）、设置页的高级选项、商品详情的规格参数。HTML 原生的 <details> 和 <summary> 就能做出最简单的折叠效果。

它和 标签页 最容易混淆：标签页把几块内容横向并排，同一时间只看一块，适合几块内容地位相当、用户会来回切换；折叠面板纵向排列，可以同时展开多段对照，也更适合手机竖屏。内容只有三五行时，直接平铺比折叠起来更好找。

开发者信息
术语 ID
component-collapse
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • details
  • .ant-collapse
  • .el-collapse
  • [class*="MuiAccordion-root"]
  • .arco-collapse
  • .t-collapse
  • .n-collapse
  • [data-slot="accordion"]
  • .accordion
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • accordion
  • collapse
  • collapsible
  • expander
  • disclosure
  • expandable
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • Accordion
  • Collapse
  • Collapsible
  • Disclosure
优先级
1 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30