这叫啥 UI？
← 返回组件目录

COMPONENT 56 · Overlays & Disclosure

手风琴

Accordion

也叫Accordion ViewExpansion Panels折叠面板组

由多个标题组成，每个标题可展开或收起对应内容区。

A set of headings that expand or collapse their associated content panels.

ANATOMY & USAGE

结构与使用建议

组成部分

  • 标题按钮
  • 展开图标
  • 内容面板

适合使用

  • 长页面有多个平级区块，用户通常只关注少数时。

不建议使用

  • 用户需要同时比较所有区块或内容很短时。

键盘与无障碍

  • 标题使用 button，维护 aria-expanded/aria-controls；标题层级正确且内容仍在合理阅读顺序中。

DESCRIBE IT TO AI

这样告诉编程助手

实现手风琴（Accordion）：由多个标题组成，每个标题可展开或收起对应内容区。

MINIMAL RUNNABLE CODE

可复制代码

原生与 React 两套实现，不依赖第三方组件库。

READ ONLY · SAFE TO COPY
<section class="demo stack" aria-label="常见问题">
  <details open>
    <summary>什么是 Slider？</summary>
    <p>一种在连续范围内选择数值的控件。</p>
  </details>
  <details>
    <summary>可以键盘操作吗？</summary>
    <p>可以，焦点位于标题时按 Enter 或空格。</p>
  </details>
  <details>
    <summary>何时使用？</summary>
    <p>当范围有明确上下界，且用户更关心相对值时使用。</p>
  </details>
</section>