toggle事件只能绑定在details元素上，summary上监听无效；需用details.addEventListener('toggle', ...)或事件委托；动态插入的details应采用document事件委托；读open值时建议用Promise.resolve().then()确保获取最新状态。
toggle事件监听写在summary上却没反应
原生 details 元素的 toggle 事件**只能在 details 元素本身监听**，不是 summary。写在 summary 上的 addEventListener('toggle', ...) 完全不会触发——浏览器根本不派发这个事件给 summary。
正确做法是：绑定到 details 元素，例如：
document.querySelectorAll('details').forEach(el => {
el.addEventListener('toggle', () => {
console.log('open:', el.open);
});
});- 别用
summary.addEventListener('toggle', ...)—— 无效 - 若用事件委托，目标必须是
details，比如container.addEventListener('toggle', e => { if (e.target.matches('details')) { ... } }) -
toggle是冒泡事件，但只从details冒泡，不经过summary
用click代替toggle导致可访问性失效
用户用键盘操作（空格键、回车键）展开 details 时，click 事件不会触发，但 toggle 会。只监听 click 就漏掉了屏幕阅读器用户和键盘党。
真实场景下，toggle 是唯一能覆盖所有触发方式（鼠标点击、空格、回车）的事件。
立即学习“前端免费学习笔记（深入）”；
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 删掉所有
summary.addEventListener('click', ...)的逻辑 - 统一改用
details.addEventListener('toggle', ...) - 如果需要区分“刚展开”还是“刚收起”，查
el.open即可，无需额外状态变量
动态插入details后toggle事件不生效
页面加载后通过 JS 插入新的 details 元素，但之前绑定的事件监听器不会自动覆盖它们——querySelectorAll 是快照，不是实时集合。
有两种可靠解法，按场景选：
- 每次插入新
details后，手动调用一次绑定函数（适合插入频次低、可控的场景） - 用事件委托绑定到父容器或
document：document.addEventListener('toggle', e => { if (e.target.matches('details')) { /* 处理 */ } })—— 这是推荐做法，一劳永逸 - 避免用
MutationObserver监听新增节点再绑定，纯属过度设计；toggle事件本身支持委托，没必要绕路
监听toggle却读不到最新open值
在 toggle 事件回调里直接读 e.target.open，有时会得到旧值——这不是 bug，而是因为事件在状态切换**过程中**触发，浏览器尚未完成 DOM 属性更新。
实际测试发现，Chrome 和 Firefox 在绝大多数情况下已同步，但 Safari（尤其旧版）偶现延迟。最稳妥的做法是加个微任务延迟读取：
details.addEventListener('toggle', e => {
Promise.resolve().then(() => {
console.log('final open:', e.target.open);
});
});- 不用
setTimeout，它不可控且可能被节流 -
Promise.resolve().then()是最小开销的“下一帧前”时机 - 如果你只是存 localStorage 或发分析日志，这一步几乎总是必要
真正容易被忽略的是：事件委托虽然方便，但 toggle 事件不支持捕获阶段，只能在冒泡阶段监听。写 addEventListener('toggle', handler, true) 会静默失败——连报错都没有。
