toggle事件仅在details元素上触发且不冒泡，必须直接绑定到details元素；summary、父容器或document监听均无效；需确保HTML结构正确、避免重复绑定和手动赋值open导致冲突。
toggle 事件只监听 details 元素，绑错位置就收不到
你写了 document.querySelector('summary').addEventListener('toggle', ...) 或者绑在父容器上？那肯定不触发。原生 toggle 事件**只在 details 元素上派发**，且不冒泡——summary 上监听、父级委托、document 全局监听，全无效。
必须这样写：
const detailsEl = document.querySelector('details');
detailsEl.addEventListener('toggle', (e) => {
console.log(e.target.open); // true / false
});
- 检查是否用了
querySelector找错了元素（比如选了summary或包装div） - 确保 HTML 中是标准结构：
<details><summary>...</summary>...</details>，不能缺标签或嵌套错 - 若页面有多个
details，别只查第一个，用querySelectorAll('details')遍历绑定
toggle 事件不响应用户点击，但 JS 手动设 open 却能生效
这是最典型的“假失效”：事件监听器本身没问题，但你同时在 onclick 里写了 el.open = true，导致原生切换和手动赋值冲突。浏览器先翻转 open（触发 toggle），你又立刻覆盖它，状态来回跳，看起来像没反应。
- 删掉所有对
details.open的直接赋值，让点击完全由原生行为驱动 - 如果必须用 JS 控制开闭（比如手风琴逻辑），就**不要监听
toggle**，改用click绑在summary上，并调用e.preventDefault()阻止默认行为 - React/Vue 等框架中，
toggle事件几乎无用——它们要求你完全接管open状态，用useState+open={isOpen}显式控制
监听了但日志只打一次，或连点后不再触发
不是事件失效，是监听器被重复注册了。常见于 SPA 页面重渲染、组件反复挂载，每次执行都调用 addEventListener，却没清理旧的。结果一次点击，多个 handler 同时执行，有的改状态、有的读状态，互相覆盖。
立即学习“前端免费学习笔记（深入）”；
- 用
useEffect（React）或connectedCallback（Web Components）时，务必返回removeEventListener清理函数 - 避免在 render 函数或模板字符串里直接写
el.addEventListener(...) - 调试时用
console.count('toggle fired')替代console.log，一眼识别是否真重复 - 注意：
toggle事件本身不会因快速连点而“丢帧”，它只在open值真正改变时触发，哪怕你一秒点十次，也只在状态翻转那一刻派发一次
HTML 写了 ontoggle 属性但没效果
ontoggle 是合法属性，但它只是语法糖，等价于 addEventListener('toggle', ...)，且存在硬伤：只能绑定一个函数、无法访问闭包、IE/Safari 旧版不执行、拿不到 e.newState。更重要的是，它**只响应用户操作**，JS 修改 open 属性仍不会触发。
- 彻底放弃
ontoggle="handler()"，一律用 JS 显式绑定 - 需要兼容 JS 控制 + 用户点击的统一入口？自己封装一个
setDetailsOpen(el, isOpen)，内部手动 dispatchtoggle事件（见知识库示例） - 别指望
ontoggle能传参或做复杂逻辑，它连this指向都不稳定
e.target.open 或 e.newState，别依赖后续 DOM 查询。 
