应避免在内嵌链接，否则会触发details切换和链接跳转双重行为；正确做法是将链接置于details展开区内部，或在summary内使用event.stoppropagation()阻止冒泡，同时确保无障碍语义和视觉反馈完整。
details 里放链接会不会触发两次点击
会，而且是常见问题。原生 <summary></summary> 本身是可聚焦、可键盘操作（Space/Enter）的交互元素；如果在里面直接塞 @#@#@#@#@#@#@#@#@#@0，在 Chrome/Firefox 中几乎必然双触发。
- 最稳妥做法：把链接放在
<summary></summary>后、<details></details>内部的展开区里，比如<details><summary>系统设置</summary><p>@#@#@#@#@#@#@#@#@#@1</p></details> - 若必须放进
<summary></summary>行内（如图标+文字组合），需加event.stopPropagation()：<summary>@#@#@#@#@#@#@#@#@#@2</summary> - 注意：不要用
return false或preventDefault()单独调用，它会干掉<summary></summary>的键盘支持（屏幕阅读器用户按空格无法展开）
open 属性和 JS 控制链接跳转的兼容性坑
open 是布尔属性，只看是否存在，不认值。写 <details open="false"></details> 等同于 <details open></details>——浏览器照样展开。JS 控制也得用属性赋值，不是 setAttribute：
- 正确关闭：
document.querySelector('details').open = false - 正确监听切换：
el.addEventListener('toggle', () => console.log(el.open))—— 注意这个事件只在用户手动点击/键盘触发时发出，JS 赋值不会触发 - 如果链接跳转前要检查状态（比如“仅当已展开时才允许跳转”），别依赖
getAttribute('open')，它返回null或字符串"open"；应始终读取el.open（布尔值）
summary 内嵌链接对无障碍（a11y）的影响
原生 <summary></summary> 被屏幕阅读器朗读为“可展开区域”，语义明确；一旦里面加了 @#@#@#@#@#@#@#@#@#@3，既保持语义，又提供操作入口
样式重置后 marker 消失但交互还在，怎么办
很多人为了统一图标，给 summary 加 list-style: none 或 appearance: none，结果小三角没了，但忘了补上视觉反馈——用户看不出这是可点击区域。
- 推荐写法：
summary::marker { content: "▶ "; }+details[open] > summary::marker { content: "▼ "; } - 避免用
display: flex直接包裹<summary></summary>，它可能破坏list-item的默认渲染逻辑，导致 marker 不出现且 Tab 键无法聚焦 - 关键验证点：按 Tab 键能否将焦点停在
<summary></summary>上？焦点框是否清晰可见？这是可访问性的底线
真正难的不是让链接能点，而是让所有人——包括不用鼠标的、靠键盘导航的、依赖语音指令的——都能一致地理解“这里点一下会怎样”。细节标签的语义约束很硬，绕不开，也不该绕。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
