ontoggle是无效写法，必须用addEventListener('toggle', )绑定；事件中通过e.newState判断展开（"open"）或收起（"closed"），e.target.open虽同步但存在微任务延迟风险。
ontoggle 是无效写法，别用内联属性绑定
HTML 里写 ontoggle="..." 或 JS 里写 details.ontoggle = fn 都不会生效——ontoggle 属性在现代浏览器中已被弃用，且规范从未正式支持它作为标准事件处理器。Chrome、Firefox、Safari 均只响应 addEventListener('toggle', ...)，其他方式一律静默失败。
常见错误是复制过时教程里的 <details ontoggle="handle()">，结果控制台无报错但回调从不执行。这不是兼容性问题，而是根本没注册上事件。
toggle 事件里怎么判断是展开还是收起
toggle 事件触发时，event.target.open 已同步更新为最新状态，可直接读取；更推荐用 event.newState，语义更清晰、值固定为 "open" 或 "closed"。
-
e.newState === "open"表示刚展开（用户点击 summary 后） -
e.newState === "closed"表示刚收起 -
e.target.open与e.newState总是一致，但后者是ToggleEvent接口的原生字段，类型安全更强 - 不要依赖
e.detail——它始终是undefined
示例：
立即学习“前端免费学习笔记（深入）”；
details.addEventListener('toggle', (e) => {
if (e.newState === 'open') {
console.log('用户展开了面板');
} else {
console.log('用户收起了面板');
}
});
为什么不能在事件开头读 open 属性？
虽然 toggle 事件在状态变更后同步触发，但某些浏览器（尤其是 Safari 15.4–16.0）存在微任务延迟：如果事件回调里立刻操作 DOM（比如插入内容、计算高度），再读 details.open 可能拿到旧值。这不是 bug，而是渲染管线未完全同步。
稳妥做法：
- 直接用
e.newState，它在事件对象创建时就已确定 - 若必须读
details.open，放在回调末尾，或包一层queueMicrotask(() => {...}) - 绝对避免
setTimeout(0)——它会引入宏任务延迟，可能被其他脚本打断
JS 手动设置 open 属性不会触发 toggle 事件
details.open = true 或 details.setAttribute('open', '') 完全不会派发 toggle 事件。这是规范行为，不是遗漏。
如果你既要支持用户点击，又要支持 JS 控制（比如手风琴逻辑、URL 参数同步），得自己封装：
- 把所有开闭操作收敛到一个函数，如
setDetailsOpen(details, isOpen) - 函数内部先设
details.open = isOpen，再手动调用你的状态处理逻辑 - 不要混用原生交互和 JS 赋值——否则
toggle事件监听器只会响应一半动作
真正容易被忽略的是：toggle 事件只代表“用户交互完成”，不等于“状态变化发生”。它的职责是通知你“现在 DOM 已更新”，而不是帮你做状态管理。
