<details> 标签仅提供原生折叠功能，需手动实现书签管理：用 data-* 存元数据、localStorage 持久化状态、toggle 事件监听开关、JS 统一处理跳转与移动端点击热区适配。
details 标签本身不支持书签持久化，但能做 UI 容器
直接用 <details> 做书签管理器，本质是把它当可折叠的交互容器用——它不存数据、不处理点击跳转、也不自动同步，所有“管理”逻辑得靠你补。浏览器原生 <details> 只提供展开/收起状态和基础样式，连点击事件都要自己监听。
常见错误是以为写个 <details><summary>常用网站</summary><a href="...">GitHub</a></details> 就算完成，结果发现：点链接没反应（<summary> 拦了事件）、刷新后状态丢失、没法增删条目、移动端点不灵。
-
<summary>默认会捕获鼠标事件，想让里面链接可点，得加pointer-events: none或把链接移出<summary> - 展开/收起状态不会自动保存，要记住用户上次开了哪个，得配合
localStorage+toggle事件手动存取 - 每个
<details>是独立 DOM 节点，动态增删书签就得用document.createElement或模板字符串拼接再insertAdjacentHTML
用 summary + data-* 属性组织分类和跳转逻辑
别把 URL 塞进 <summary> 文本里，用 data-url 或 data-category 存元数据，既干净又方便 JS 处理。比如：
<details data-category="dev"> <summary>开发工具</summary> <a href="https://github.com" data-url="https://github.com">GitHub</a> <a href="https://regex101.com" data-url="https://regex101.com">Regex101</a> </details>
这样 JS 可以统一监听 click 事件，检查 event.target.dataset.url，再决定是 window.open 还是 location.href，还能加个空格键支持（keydown 判断 key === ' '）。
立即学习“前端免费学习笔记（深入）”；
-
<summary>内不要放交互元素（如按钮、链接），否则在 Safari 和部分安卓 WebView 中可能触发两次 toggle - 如果想让整个
<summary>区域可点击跳转（比如点“开发工具”就打开第一个链接），得用 JS 绑定，不能只靠href - 避免用
target="_blank"直接写死，容易被浏览器拦截；改用window.open(url, '_blank', 'noreferrer')更可靠
用 localStorage 同步 details 的 open 状态
用户关掉页面再回来，肯定希望刚才展开的分类还开着。<details> 的 open 属性是布尔值，但 localStorage 只存字符串，所以读写时得显式转换：
const details = document.querySelectorAll('details');
details.forEach(d => {
const key = `details-${d.dataset.category || 'default'}`;
const isOpen = localStorage.getItem(key) === 'true';
d.open = isOpen;
<p>d.addEventListener('toggle', () => {
localStorage.setItem(key, String(d.open));
});
});注意：不是所有浏览器都支持 toggle 事件（IE 完全不支持，旧版 Safari 需要 polyfill），生产环境建议加个 try/catch 或 fallback 到 click + setTimeout 检测 open 变化。
- 别用
id当 key，因为 ID 可能重复或含特殊字符；优先用dataset.category或生成哈希 - 如果书签组很多，localStorage 可能满（一般 5–10MB），建议加个清理逻辑，比如只存最近 20 个分类的状态
- 同源策略下，不同协议（http/https）或端口的页面无法共享 localStorage，调试时容易误判“没保存”
移动端点击区域小，必须重设 summary 的点击热区
原生 <summary> 在 iOS 和部分安卓上默认点击区域只有文字大小，手指一点容易失焦。不用 CSS 框架的话，最简方案是加这几行：
details summary {
padding: 8px 16px;
margin: -8px -16px;
cursor: pointer;
}关键在 margin 负值把点击区域撑开，同时保持视觉不变。如果用了 pointer-events: none 让内部链接可点，那这个 summary 就完全不响应点击了——此时必须用 JS 给整个 <details> 绑定 click 事件，并手动切换 open 属性。
- 别用
min-height或line-height撑高点击区，某些安卓浏览器会忽略 - 测试时真机必试，Chrome DevTools 的 device mode 模拟不准触摸事件流
- 如果支持语音控制（如 Siri），记得给
<summary>加role="button"和aria-expanded属性，否则读屏器识别不了状态
细节堆起来才像一个能用的书签管理器，但最容易被跳过的其实是 localStorage 的异常处理和移动端点击穿透——这两个地方一出问题，用户第一感觉就是“点不动”“关了又弹开”，而不是代码哪错了。
