下拉菜单

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

带行为核心包 1 个事件

示例

文章一
文章二

在线试用 Markdown 版

代码

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

属性

属性	用在	取值	说明
`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]') 就能知道是哪一行的按钮

样式类

zh-menu

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

常见问题

下拉菜单是什么？

怎么使用下拉菜单？

先在页面里引入 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。