toggle事件仅响应用户交互（点击summary或按空格/回车），js直接设置open属性或setattribute不会触发；必须用addeventlistener('toggle', handler)绑定，e.target.open可实时获取最新状态。
toggle事件只响应用户点击，JS设open不触发
直接给 details 元素赋值 details.open = true 或调用 setAttribute('open', '')，完全不会触发 toggle 事件。它只在用户真实交互（鼠标点击、键盘空格/回车）时派发——这是最常被误以为“监听失效”的根源。
- 错误写法：
details.ontoggle = () => {...}或内联onToggle属性，无效 - 正确绑定必须用：
details.addEventListener('toggle', handler) -
e.target永远是details元素本身，不是summary -
e.detail始终为undefined，别依赖它
怎么读取当前展开/收起状态
事件回调里直接读 e.target.open 就是最新状态，不需要额外判断或延迟。它在 DOM 更新后同步生效，比轮询更可靠。
- 展开时：
e.target.open === true - 收起时：
e.target.open === false - 想语义更明确，可用
e.newState（值为"open"或"closed"），但仅限现代浏览器（Chrome 101+、Firefox 98+、Safari 15.4+） - 别在回调里再执行
e.target.open = !e.target.open，会引发无限循环
多个details实现手风琴效果要手动关兄弟节点
原生 details 不互斥，name 属性虽已在 Chrome 117+/Safari 17.4+ 支持自动单开，但旧版 Safari 或安卓 WebView 仍需 JS 降级。
- 监听每个
details的toggle事件 - 仅当
e.target.open === true时，遍历其他同级details并设other.open = false - 避免用
removeAttribute('open')，Safari 15 有兼容问题；直接赋值布尔值更稳 - 动态插入的新
details需重新绑定事件，toggle不冒泡，无法委托
兼容性差时别硬扛，降级方案更实在
IE 全系不支持 toggle，旧版 Safari（
- 检测方式：
'toggle' in Event && typeof document.createElement('details').addEventListener === 'function' - 不支持时，退回到监听
summary的click，并用setTimeout(() => console.log(details.open), 0)延迟读取（因状态更新有微任务延迟） - 若需深度兼容，建议用 polyfill（如
details-polyfill），但注意它无法完美模拟toggle事件的底层行为 - 真正容易被忽略的是：所有监听逻辑必须等 DOM 完全就绪，否则
querySelectorAll('details')可能漏掉动态渲染的节点
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
