应使用 details 元素的 toggle 事件监听状态变化，因其兼容鼠标和键盘操作；通过 hasAttribute('open') 判定状态，用 setAttribute/removeAttribute 同步 DOM 属性以驱动渲染；localStorage 键名须含唯一 data-id 以避免冲突；还需监听 storage 事件实现多标签页同步。
details 的 toggle 事件才是状态同步的正确入口
直接监听 click 或用 details.open = true 赋值无法可靠捕获状态变化：前者在键盘操作（如回车、空格）时失效，后者不触发 DOM 渲染更新，且会绕过浏览器原生切换逻辑。必须使用 toggle 事件——它是 HTML5 为 details 专门定义的语义化事件，无论鼠标点击、空格键还是回车键触发展开/收起，都会派发。
关键点：
-
toggle事件不带参数，需用details.hasAttribute('open')判定当前是否展开（不能读details.open属性，它始终返回布尔值，不反映真实 DOM 状态） - 该事件在状态**已变更后**触发，适合立即存 localStorage
- 不要在事件里调用
preventDefault()，会破坏可访问性
localStorage 键名必须带唯一标识，避免多面板冲突
如果页面有多个 details，共用同一个 key（比如固定写死 'details_open'）会导致所有面板状态被覆盖为最后一个操作的值。必须为每个 details 分配唯一 ID，并拼接成 key。
推荐做法：
立即学习“前端免费学习笔记（深入）”；
- 给每个
details添加data-id属性，例如<details data-id="faq-1"> - key 命名为
`details_${id}_open`，确保隔离 - 避免用
index或querySelectorAll下标生成 ID——DOM 顺序变动或动态增删元素时会错位
页面加载时用 setAttribute/removeAttribute 同步 open 状态
仅设置 details.open = true 不会让浏览器重绘三角图标或触发 CSS details[open] 选择器，视觉和行为都会不同步。必须通过 DOM 属性操作来驱动渲染层。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
正确写法：
- 若 localStorage 中值为
'true'，执行details.setAttribute('open', '')（属性值可为空字符串） - 若值为
'false'或不存在，执行details.removeAttribute('open') - 不要用
details.open = true/false，它只是 JS 属性，不映射到 HTML 属性
示例片段：
const saved = localStorage.getItem(`details_faq-1_open`);
if (saved === 'true') {
details.setAttribute('open', '');
} else {
details.removeAttribute('open');
}
多标签页同步需要监听 storage 事件
用户可能在另一个标签页操作了同一组 details，当前页的状态不会自动更新。仅靠 toggle 事件保存是单向的，必须补上反向同步。
做法很简单：
- 在页面初始化时，为
window绑定storage事件监听器 - 当检测到 key 匹配（如以
'details_'开头），重新查询对应details元素并按上述逻辑同步其open属性 - 注意：
storage事件只在**其他标签页**修改 localStorage 时触发，当前页修改不会触发自身
容易忽略的一点：如果你用了 data-id，但没在 storage 回调里做元素查找容错（比如元素已被移除），应加 if (details) 判断，避免报错中断逻辑。
