# 下拉菜单

点击按钮弹出菜单。菜单内容写在页面里的一个隐藏列表中，选中后触发 zh:select。一个菜单可以被多个按钮共用（比如表格每一行一个「操作」按钮，都指向同一个 #menu）。

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

## 用法

```html
<button class="zh-btn" data-zh-dropdown="#menu">操作 <i data-i="chevron-down"></i></button>
<ul class="zh-menu" id="menu" hidden>
  <li><a href="#" data-value="edit">编辑</a></li>
  <li><a href="#" data-value="copy">复制</a></li>
  <li><a href="#" data-value="del">删除</a></li>
</ul>

<script>
document.querySelector('[data-zh-dropdown]').addEventListener('zh:select', function (e) {
  console.log(e.detail.value);
});
</script>

<!-- 表格行菜单：每行一个按钮，共用同一个菜单 -->
<table>
  <tr data-id="1"><td>文章一</td><td><button class="zh-btn text" data-zh-dropdown="#rowMenu">操作</button></td></tr>
  <tr data-id="2"><td>文章二</td><td><button class="zh-btn text" data-zh-dropdown="#rowMenu">操作</button></td></tr>
</table>
<ul class="zh-menu" id="rowMenu" hidden>
  <li><a href="#" data-value="edit">编辑</a></li><li><a href="#" data-value="del">删除</a></li>
</ul>
<script>
document.addEventListener('zh:select', function (e) {
  var btn = e.target.closest('[data-zh-dropdown="#rowMenu"]'), id = btn.closest('tr').dataset.id;
  console.log(e.detail.value, '第', id, '行');
});
</script>
```

## 样式类

`zh-menu`

## 属性

| 属性 | 用在 | 取值 | 说明 |
|---|---|---|---|
| `data-zh-dropdown` | 按钮 | 菜单元素的选择器，如 #menu | 声明这个按钮控制哪个菜单 |
| `data-zh-placement` | 按钮 | bottom-start（默认）、bottom-end、top-start、top-end、left、right 等 | 菜单出现的位置，空间不足时自动翻转 |
| `hidden` | 菜单 <ul class="zh-menu"> | 布尔 | 菜单源元素保持隐藏；库会克隆它来显示 |
| `data-value` | 菜单项 <a> 或 <button> | 字符串 | 选中时作为 detail.value；不写则取文字 |
| `aria-disabled` | 菜单项 | true | 禁用某一项 |

## 事件

| 事件 | 触发于 | detail | 说明 |
|---|---|---|---|
| `zh:select` | 触发按钮 | { value, item } | 选中某项后在被点击的那个按钮上触发（冒泡），随后菜单关闭。多个按钮共用一个菜单时，用 e.target.closest('[data-zh-dropdown]') 就能知道是哪一行的按钮 |

## 无障碍

- 按钮带 aria-haspopup / aria-expanded；菜单 role="menu"，菜单项 role="menuitem"
- 在按钮上按 ↓ 打开；打开后焦点落在第一项，↑ ↓ / Home / End 移动，输入字母可跳转，Enter 选中
- Esc 关闭并把焦点还给按钮；点击外部也会关闭

## 常见问题

### 下拉菜单是什么？

点击按钮弹出菜单。菜单内容写在页面里的一个隐藏列表中，选中后触发 zh:select。一个菜单可以被多个按钮共用（比如表格每一行一个「操作」按钮，都指向同一个 #menu）。

### 怎么使用下拉菜单？

先在页面里引入 zhaoui.css 和 zhaoui.js（放在 </body> 前，不加 defer），再照本页「用法」里的标记书写。

### 下拉菜单有哪些事件？

zh:select（选中某项后在被点击的那个按钮上触发（冒泡），随后菜单关闭。多个按钮共用一个菜单时，用 e.target.closest('[data-zh-dropdown]') 就能知道是哪一行的按钮）。

### 下拉菜单支持键盘和读屏吗？

按钮带 aria-haspopup / aria-expanded；菜单 role="menu"，菜单项 role="menuitem"；在按钮上按 ↓ 打开；打开后焦点落在第一项，↑ ↓ / Home / End 移动，输入字母可跳转，Enter 选中；Esc 关闭并把焦点还给按钮；点击外部也会关闭。

### 下拉菜单需要依赖框架吗？

不需要。ZhaoUI 是原生 HTML、CSS 和 JavaScript，不依赖 jQuery、Vue 或 React。