# 折叠面板

手风琴或多开的折叠列表。展开状态用 .is-open 表示，库负责切换、无障碍属性和键盘。

**依赖**：`zhaoui.css` 与 `zhaoui.js`（原生 HTML、CSS、JS，不需要框架或 jQuery）。

## 用法

```html
<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>
```

## 样式类

`zh-collapse`、`zh-collapse-item`、`zh-collapse-trigger`、`zh-collapse-panel`

## 属性

| 属性 | 用在 | 取值 | 说明 |
|---|---|---|---|
| `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 } | 某一项展开或收起时触发（冒泡） |

## 无障碍

- 触发按钮带 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。