HTML多功能下拉按钮：点击展开更多操作菜单的实现细节-html教程-PHP中文网

用+可实现无需javascript的语义化下拉菜单，它原生支持键盘操作、屏幕阅读器及aria-expanded，默认收起，加open属性可默认展开，但ie不支持，且无法自动互斥或点击外部收起。

html多功能下拉按钮：点击展开更多操作菜单的实现细节

不需要 JavaScript 就能做出基础版下拉菜单，但必须用 <details></details> + <summary></summary> 组合。这是唯一被浏览器原生支持、语义正确、且自带 ARIA 属性的方案。

常见错误是硬套 <div> + <code>onclick 模拟，结果键盘无法聚焦、屏幕阅读器不识别、移动端点透或失焦关闭异常。

原生 <details></details> 无法监听“展开完成”时机、不能动态插入菜单项、也不支持点击区域外自动收起——这些得靠 JS 补。

关键不是重写整个下拉逻辑，而是最小干预：只监听 toggle 事件，再按需操作 DOM。

监听 details.addEventListener('toggle', handler)，比监听 click 更准确（避免重复触发）
收起时清空动态生成的子菜单项，否则下次展开可能残留旧内容
点击外部关闭：用 document.addEventListener('click', ...)，但要排除 details 及其子元素（检查 e.target.closest('details')）
不要用 setTimeout 延迟收起——会导致点击菜单项时菜单闪退；改用 focusout 或 blur 配合防抖

把输入框塞进 <details></details> 里，最常遇到两个问题：焦点丢失、滚动错位。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

根本原因是 <details></details> 的展开动画由浏览器控制，而 input 聚焦会强制滚动到可视区，两者冲突。

禁用原生展开动画：加 CSS details[open] { animation: none; }，再用 max-height + transition 手动控制（更可控）
<input> 聚焦后，若菜单高度变化导致滚动，手动调用 input.scrollIntoView({ block: 'nearest' })
避免在 <summary></summary> 里放 <input> —— 会破坏按钮语义，且 Safari 下点击输入框不触发 toggle
如果必须嵌套表单，把 <form></form> 提到 <details></details> 外层，用 form.target 或事件委托处理提交

在 iOS Safari 和 Android Chrome 上，<details></details> 的 touchstart 和 focus 顺序混乱，容易导致点一下没反应、点两下才展开。

这不是 bug，是浏览器为兼容老页面做的妥协：触摸事件默认不触发 focus，而 <summary></summary> 又依赖 focus 状态来激活。

给 <summary></summary> 加 tabindex="0" 强制可聚焦（原生已支持，但某些安卓 WebView 需显式声明）
避免同时监听 touchstart 和 click —— 移动端会触发两次，用 if ('ontouchstart' in window) { ... } else { ... } 分流
菜单展开后，禁止背景滚动：给 body 加 overflow: hidden，但记得收起时恢复（别用 !important，用 class 切换）
返回键收起菜单：监听 window.onpopstate 不够可靠，优先用 details.addEventListener('toggle', ...) + history.pushState() 手动管理状态