summary内放链接或按钮会默认触发details折叠，需在子元素加onclick="event.stopPropagation()"阻止冒泡；禁用disabled属性因破坏无障碍支持；监听toggle事件可干预状态但有视觉闪动。
summary里放链接或按钮时怎么避免触发折叠
点击<summary>内部的<a>或<button>会默认触发details切换——这不是bug，是浏览器原生行为。用户想跳转或提交，结果面板先展开了，体验断裂。
唯一轻量解法是阻止事件冒泡：onclick="event.stopPropagation();"加在子元素上。注意别加在<summary>本身，否则整个折叠功能就废了。
<summary><a href="#" onclick="event.stopPropagation()">跳转链接</a></summary>- 若用
<button type="button">，同样加onclick="event.stopPropagation()"；设type="submit"则必须额外处理表单逻辑 - 不推荐把链接移出
<summary>再用CSS模拟样式——语义丢失，键盘和屏幕阅读器支持变差
如何让details保持展开状态不被用户收起
没有“禁用折叠”的HTML属性。所谓“锁死展开”，本质是监听toggle事件后立刻反转状态。但要注意：这会导致视觉闪动（先收再展），且首次点击仍会触发一次收起动画。
实操上只在明确需要干预时才用：
立即学习“前端免费学习笔记（深入）”；
- 监听
toggle事件：details.addEventListener('toggle', e => { if (!details.open) details.open = true; }); - 不能用
click事件替代——它无法捕获键盘（空格/回车）触发的切换 - 若内容依赖JS动态加载，需等DOM挂载完成再绑定，否则
details.open读取可能为false（尤其Safari ≤15.4有渲染延迟）
disabled属性能阻止折叠吗？代价是什么
可以，但不推荐。给<details disabled>后，原生折叠行为确实失效，此时必须完全靠JS控制open属性。
代价很实际：
- 屏幕阅读器会跳过整个
<details>，<summary>失去可访问标题语义 - 键盘焦点无法进入，
Tab会直接跳过该区域 - 移动端iOS Safari中，
disabled还会导致summary热区识别率下降
如果项目有WCAG 2.1合规要求，这条路基本走不通。
哪些CSS操作会意外破坏折叠交互
看似无关的样式改动，常让<summary>点击失灵，尤其在Safari和旧版Chrome中。
高频踩坑点：
-
summary { display: inline-block; }—— 破坏原生热区，改用display: block并配cursor: pointer -
summary::marker { display: none; }—— 部分浏览器连带禁用点击区域，应改用list-style: none+summary::before - 给
<details>设pointer-events: none或opacity: 0—— 直接屏蔽所有交互，包括键盘 - 父容器用了
transform或filter，未重置will-change—— Safari中可能导致summary响应延迟
真正容易被忽略的是：服务端模板或构建工具自动插入的空白文本节点，会让<summary>不再是<details>的首个子元素——结构一破，所有浏览器都点不动。
