原生details标签不支持双击展开，需禁用默认单击行为并手动监听dblclick事件控制open属性；注意兼容性问题，移动端和键盘访问需额外处理，复杂场景建议改用button+div自定义实现。
details标签默认不支持双击展开
HTML原生 <details> 只响应单击 <summary> 来切换 open 状态，没有双击机制。想实现“双击展开”，必须用 JavaScript 拦截双击事件并手动控制 open 属性 —— 但要注意：双击会触发两次单击，直接绑定 dblclick 容易和原生行为冲突。
正确做法：禁用原生单击 + 手动处理双击
核心思路是阻止 <summary> 的默认折叠/展开行为，再用 dblclick 事件控制 open。否则浏览器会在你双击时先执行一次单击（收起或展开），再执行你的双击逻辑，状态错乱。
- 给
<summary>添加onclick="return false;"或用 JS 调用event.preventDefault()阻止默认行为 - 为
<summary>单独监听dblclick，然后设置父级<details>的open属性 - 注意：不要用
toggleAttribute('open')，因为首次双击时元素可能没有open属性，建议统一用element.open = !element.open
<details id="my-details">
<summary onclick="return false;" ondblclick="this.parentElement.open = !this.parentElement.open;">
双击我展开
</summary>
<p>这里是详情内容</p>
</details>
兼容性与边界情况要注意
这个方案在所有现代浏览器中都有效，但有几个实际踩坑点：
- 如果用户习惯单击操作，禁用单击后会完全失去快捷展开能力，需评估交互合理性
- 键盘用户（Tab + Enter）仍会触发原生单击行为，
onclick="return false"对键盘事件无效；如需无障碍支持，得额外监听keydown并拦截 Enter/Space - 移动端没有真正“双击”，
dblclick事件触发不稳定或延迟高，不建议在移动优先场景使用 - 多个
<details>共存时，避免用内联ondblclick，改用事件委托或 class 选择器批量绑定
更稳妥的替代思路：用按钮模拟 summary
如果双击是硬性需求且要兼顾可访问性，不如放弃原生 <details>，改用 <button> + <div> 组合，自己管理 aria-expanded 和显示逻辑。这样能完全掌控事件流，也方便加过渡动画、防抖、键盘支持等。
立即学习“前端免费学习笔记（深入）”；
- 按钮设
role="button" aria-expanded="false"，点击时切换aria-expanded和目标区域的hidden属性 - 监听
dblclick时只做一次aria-expanded切换，不依赖原生行为 - 保留 Enter/Space 键支持：在
keydown中判断event.key === 'Enter' || event.key === ' '
原生 <details> 的价值在于语义化和零配置开箱即用；一旦需要定制交互，它反而成了限制来源。
