details展开状态需手动同步到location.hash：监听toggle事件，用data-id标识面板，通过urlsearchparams拼接哈希（如#faq-1=open），用replacestate写入；还原时在domcontentloaded后用setattribute('open', '')初始化，避免覆盖默认状态。
details展开状态怎么写入location.hash
不能直接靠details.open自动同步，必须手动监听toggle事件，解析details的标识，拼成哈希再赋值给location.hash。浏览器不会主动把open状态映射到URL，这是纯前端控制逻辑。
关键前提是每个details要有唯一标识，推荐用data-id属性，比如<details data-id="faq-1"></details>。没有标识就无法区分多个面板，哈希写进去也没法反向还原。
- 监听
toggle事件，不是click——后者捕获不到键盘操作或JS触发的展开 - 在回调里读
e.target.dataset.id和e.target.hasAttribute('open')，避免误读e.target.open（它可能还没完成渲染同步） - 拼哈希时建议用
faq-1=open这种键值对格式，比单纯faq-1更明确，也方便后续扩展 - 用
history.replaceState()写入，避免产生多余历史记录；不要用location.hash = ...，它会触发页面滚动
怎么从URL哈希还原details初始展开状态
页面加载时需立即读location.hash，解析出哪些details该展开，然后用setAttribute('open', '')设置——不能直接赋值el.open = true，否则不触发DOM渲染，视觉上还是收起的。
注意：这个逻辑必须在DOMContentLoaded之后执行，但要在所有toggle监听器绑定之前完成，否则用户刚点开就又被脚本覆盖。
- 哈希为空或格式错误时，跳过处理，保持HTML原生默认状态（即有
open属性就展开，没有就收起） - 解析哈希建议用
new URLSearchParams(location.hash.slice(1))，比正则更可靠，尤其当哈希含特殊字符时 - 只对当前页面存在的
details[data-id]节点生效，避免querySelector找不到时报错 - 还原后别再触发
toggle事件——此时只是初始化，不是用户交互，不应广播状态变更
多个details共存时，哈希怎么避免冲突和覆盖
哈希是单值字段，不能存多个键值对。所以得把所有状态扁平化拼成一个字符串，比如#faq-1=open&faq-2=closed&contact=open。靠URLSearchParams序列化/反序列化最稳妥。
如果只存一个ID（如#faq-1），那就只能支持单面板高亮，其余状态全部丢失——这不是“同步”，只是锚点跳转。
- 每次写哈希前，先用
URLSearchParams读取当前全部键值，再按需更新某一项，最后toString()回写，避免覆盖其他面板状态 - 用户手动改哈希（比如删掉某个
&段）后刷新，脚本要能容错，缺失项就按HTML默认状态走 - 不建议用数组式哈希如
#open=faq-1,faq-2，解析麻烦且难扩展，比如想加“closed”状态就不好表达
为什么toggle事件里直接改location.hash会卡顿或失效
因为toggle事件是同步触发的，而location.hash变更会触发浏览器重排+滚动定位，若同时有多个details快速切换，容易堆积或被丢弃。
更严重的是：某些浏览器（尤其是Safari）在toggle回调中直接写hash，会导致details自身状态与URL短暂不一致，用户点一下，面板开了，但哈希没变；再点一下，哈希变了，面板却关了。
- 用
queueMicrotask()包一层写哈希操作，确保DOM渲染完成后再更新URL - 加防抖：同一帧内多次
toggle只写一次哈希，避免高频操作导致URL疯狂跳变 - 写入前先比对当前
location.hash是否已包含目标状态，避免无意义更新（减少history栈污染）
details，当前页不会自动响应——那需要额外监听storage事件并配合localStorage做跨页广播。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
