← 返回 Web 词条

手风琴折叠组

Web原生支持

在 Web 上叫Disclosure Group

也叫 Accordion · Exclusive Disclosure Group

多个 <details name="…">

适用范围:支持 details name 分组的现代浏览器

原生 details 可直接展开收起;相同 name 可限制为同时只展开一项。键盘和视觉细节仍需测试。

它把多段内容收在各自标题下面,用户点击标题后展开或收起对应内容。

  • 点一个标题展开内容再点就收起
  • 一排问题点开才看答案的东西
  • 几块内容一次只展开一块
  • 折叠面板组
  • 伸缩列表
  • 可展开分组

结构示意图

WebDisclosure Group原生支持

其他平台的相似实现

iOS需自己实现
该平台没有原生实现

iOS 没有独立的手风琴容器,系统只提供单个 Disclosure Group 这一层原语。

看 iOS 视角 →
Android需自己实现
该平台没有原生实现

通用 Material 3 没有 Accordion 或 Expansion Panel 组件,需要用列表、按钮和展开动画组合。

看 Android 视角 →

使用规范

什么时候用

  • 内容可以按主题分段,用户通常只需阅读其中少数部分

什么时候别用

  • 内容很短可以一次读完,或用户必须同时比较多个分组

容易混淆

Web 出处

查看 Web / iOS / Android 完整对照 →