details元素的toggle事件必须用addEventListener('toggle', handler)监听，不能内联绑定ontoggle；仅用户点击summary或按空格/回车时触发，JS修改open属性不触发；e.target为details元素，状态应读e.target.open，且事件不冒泡。
toggle 事件不是写出来的，是监听出来的；而且它只在用户点击 <summary></summary> 时触发，JS 直接改 open 属性完全不会派发它。
details 元素的 toggle 事件怎么监听？
必须用 addEventListener('toggle', ...)，不能写成 ontoggle，也不能内联绑定（如 onToggle="..." 不生效）。
-
toggle是原生事件类型，但浏览器不支持冒泡，所以无法委托到父容器（除非用details父级监听并手动遍历） -
e.target永远是<details></details>元素本身，不是<summary></summary> - 别读
e.detail—— 它恒为undefined - 判断状态直接看
e.target.open，它在事件触发时已同步更新
为什么 JS 设置 open = true 后 toggle 事件不执行？
这是最常被忽略的边界：浏览器只对用户交互（点击、空格键、回车键）响应并派发 toggle，纯 JS 修改 open 属性或 setAttribute('open', '') 不会触发任何事件。
- 如果你同时支持用户点击和 JS 控制（比如初始化状态、API 触发展开），得自己封装统一入口函数
- 例如：
setDetailsOpen(detailsEl, true)内部先设detailsEl.open = true，再手动调用你的回调逻辑 - 混用原生交互和 JS 控制容易导致 UI 状态与业务逻辑脱节，尤其在动画、高亮、表单校验等场景下
兼容性差怎么办？怎么安全降级？
toggle 事件在 Safari 15.4+、Chrome 101+、Firefox 98+ 才稳定支持；旧版 Safari 会静默失败（无报错也不执行），IE 全系不支持。
立即学习“前端免费学习笔记（深入）”；
- 检测方式推荐：
if (typeof details.addEventListener === 'function' && 'toggle' in Event)，比查onbeforetoggle更准 - 降级方案不是“补事件”，而是换实现：用
<input type="checkbox">+ CSS:checked控制显隐，或用max-height+scrollHeight手动驱动过渡动画 - 若必须保语义化且支持旧环境，可把
<details></details>当 fallback，外层套一层带 ARIA 的自定义结构，用 JS 统一接管所有交互
真正麻烦的从来不是监听事件本身，而是当页面里既有用户点开的 <details></details>，又有脚本自动展开的，两者状态不同步却共用同一套视觉反馈——这时候光靠 toggle 事件根本兜不住。
