折叠面板
手风琴或多开的折叠列表。展开状态用 .is-open 表示，库负责切换、无障碍属性和键盘。
带行为 核心包 1 个事件
示例
内容一
内容二
代码
<div class="zh-collapse" data-mode="single">
<div class="zh-collapse-item is-open">
<h4 class="zh-collapse-h"><button class="zh-collapse-trigger" type="button"><span class="lead">第一项</span><i data-i="chevron-right" class="zh-collapse-chev"></i></button></h4>
<div class="zh-collapse-panel"><div class="zh-collapse-inner"><div class="zh-collapse-content">内容一</div></div></div>
</div>
<div class="zh-collapse-item">
<h4 class="zh-collapse-h"><button class="zh-collapse-trigger" type="button"><span class="lead">第二项</span><i data-i="chevron-right" class="zh-collapse-chev"></i></button></h4>
<div class="zh-collapse-panel"><div class="zh-collapse-inner"><div class="zh-collapse-content">内容二</div></div></div>
</div>
</div>属性
| 属性 | 用在 | 取值 | 说明 |
|---|---|---|---|
data-mode | .zh-collapse | single | multiple（默认） | single：同时只展开一项；multiple：各项独立 |
is-open | .zh-collapse-item | class | 初始展开的项加上这个类 |
disabled | .zh-collapse-trigger | 布尔 | 禁用某一项，不可点击也不参与方向键 |
事件
| 事件 | 触发于 | detail | 说明 |
|---|---|---|---|
zh:collapse-toggle | .zh-collapse | { item, open } | 某一项展开或收起时触发（冒泡） |
样式类
zh-collapse zh-collapse-item zh-collapse-trigger zh-collapse-panel
无障碍
- 触发按钮带 aria-expanded / aria-controls，面板带 role="region" 与 aria-labelledby
- 收起的面板加 inert，内部内容不会被键盘聚焦
- 方向键上下在标题间移动，Home / End 跳到首尾
常见问题
折叠面板是什么？
手风琴或多开的折叠列表。展开状态用 .is-open 表示，库负责切换、无障碍属性和键盘。
怎么使用折叠面板？
先在页面里引入 zhaoui.css 和 zhaoui.js（放在 </body> 前，不加 defer），再照本页「用法」里的标记书写。
折叠面板有哪些事件？
zh:collapse-toggle（某一项展开或收起时触发（冒泡））。
折叠面板支持键盘和读屏吗？
触发按钮带 aria-expanded / aria-controls，面板带 role="region" 与 aria-labelledby；收起的面板加 inert，内部内容不会被键盘聚焦；方向键上下在标题间移动，Home / End 跳到首尾。
折叠面板需要依赖框架吗？
不需要。ZhaoUI 是原生 HTML、CSS 和 JavaScript，不依赖 jQuery、Vue 或 React。