toggle事件无参数，e.detail恒为undefined；必须通过details.dataset读取data-*属性传参，且应优先用hasAttribute('open')判断真实状态。
toggle事件根本没有参数可传
HTML <details></details> 元素的 toggle 事件本身不带任何有效参数——e.detail 永远是 undefined，浏览器不会注入状态、目标 ID 或自定义数据。你不能靠事件对象“拿到”上下文，更不能像 click 那样用 e.target.dataset.id 直接取值（虽然 dataset 确实可用，但它来自元素本身，不是事件传进来的）。
想传参？得靠 data-* 属性 + 事件委托外的显式绑定
真正可行的“传参”，其实是把参数提前写在 DOM 上，监听时现场读取：
-
data-属性必须写在<details></details>元素上，不是<summary></summary>—— 因为事件触发在<details></details>，e.target就是它 - 不要用内联
ontoggle：它不被支持，写了也静默失效 - 避免在父级用事件委托：
toggle不冒泡，委托监听不到 - 多个
<details></details>共存时，每个都应独立绑定，或用querySelectorAll批量注册并读取各自的dataset
示例：
<details data-section="faq" data-index="2"> <summary>Q2：怎么重置密码？</summary> <p>点击右上角「忘记密码」…</p> </details>对应 JS：
document.querySelectorAll('details').forEach(details => {
details.addEventListener('toggle', () => {
const id = details.dataset.section;
const idx = details.dataset.index;
track('details_toggle', { id, idx, open: details.hasAttribute('open') });
});
});
为什么不能依赖 e.target.open 判断新状态
看似最直接的 e.target.open 在部分环境里不可靠：
立即学习“前端免费学习笔记（深入）”；
- Safari ≤15.4 和某些安卓 WebView 中，
toggle事件触发时open属性可能尚未同步更新 - 服务端渲染（SSR）后补监听时，DOM 渲染节奏和 JS 执行时序错位，容易读到旧值
-
hasAttribute('open')是唯一反映真实渲染层状态的方式，比布尔属性更稳
所以埋点逻辑里应写 details.hasAttribute('open')，而不是 details.open。
JS 修改 open 属性不会触发 toggle 事件
这是最容易误解的一点：手动设置 details.open = true 或 details.setAttribute('open', '') 都不会派发 toggle 事件。该事件只响应用户交互（点 <summary></summary>、空格、回车）。
- 如果你在 toggle 回调里又执行了
otherDetails.open = false来实现单选折叠，其他<details></details>的状态虽变，但它们的toggle事件不会触发——这反而是好事，避免循环或重复埋点 - 需要联动反馈时，得手动调用埋点函数，不能指望事件自动覆盖
真正要小心的，是把“用户操作触发的事件”和“JS 控制状态”混为一谈。前者是唯一可信的埋点入口，后者只是副作用。
