COMPONENT 57 · Overlays & Disclosure
展开 / 收起
Disclosure / Collapsible
也叫CollapsibleExpander展开详情DisclosureGroup
单个触发器显示或隐藏一块附加内容。
A single trigger that reveals or hides an additional content region.
ANATOMY & USAGE
结构与使用建议
组成部分
- 展开触发器
- 状态图标
- 内容区域
适合使用
- 附加详情是可选的，并与触发器直接相关时。
不建议使用
- 存在多个同级面板需要统一组织时，应使用 Accordion。
键盘与无障碍
- 优先 details/summary 或 button；同步 aria-expanded，隐藏内容不应进入键盘顺序。
DESCRIBE IT TO AI
这样告诉编程助手
实现展开 / 收起（Disclosure / Collapsible）：单个触发器显示或隐藏一块附加内容。
MINIMAL RUNNABLE CODE
可复制代码
原生与 React 两套实现，不依赖第三方组件库。
READ ONLY · SAFE TO COPY
<details class="demo">
<summary>展开 / 收起：配送信息</summary>
<p>工作日 16:00 前下单，当天发货。</p>
</details>