要实现点击按钮触发所有<details>收起，必须操作open属性而非display/visibility，推荐为回复<details>添加.reply-details类并用querySelectorAll('.reply-details')精准选取，动态内容需确保JS执行时机或使用事件委托，同时注意焦点管理与IE降级处理。
点击按钮触发所有 <details> 元素收起
直接用原生 <details> + <summary> 是最轻量、无需 JS 就能折叠的方案，但“全局收起”需要 JS 干预。关键点在于：不能靠 display: none 或 visibility: hidden，否则会破坏 <details> 的语义和键盘可访问性；必须操作 open 属性。
实操建议：
- 给所有评论回复容器统一加
class="comment-reply"，并用<details>包裹内容（<summary>写“查看回复”之类） - 按钮绑定 click 事件，遍历所有
.comment-reply，对每个元素调用element.removeAttribute('open') - 不要用
element.open = false—— 这在某些旧版 Safari 下不触发 UI 更新，属性操作才可靠
querySelectorAll 选中范围必须准确
常见错误是选到父级 <details> 或嵌套结构里的子 <details>，导致部分收不起或重复操作。比如评论区本身也用了 <details> 展开整条评论，而回复是它的子节点。
推荐写法：
立即学习“前端免费学习笔记（深入）”；
- 给每条回复的
<details>加明确 class：<details class="reply-details"> - JS 中用
document.querySelectorAll('.reply-details')，避免模糊选择如'details' - 如果回复是动态插入的，确保 JS 在插入后执行，或用事件委托 + 检查
event.target.matches('.reply-details')
避免影响页面滚动和焦点管理
批量收起时，若当前有某个 <details> 处于聚焦状态（比如用户刚点开它），强制收起后焦点会丢失，键盘用户可能卡住。
稳妥做法：
- 收起前记录当前 activeElement，收起后尝试恢复焦点到按钮或最近的可聚焦容器
- 加
tabindex="-1"到<details>上，让它可被脚本聚焦：el.setAttribute('tabindex', '-1'); el.focus(); - 不要在收起过程中触发
scrollIntoView()—— 容易跳动，用户反感
IE 不支持 <details>？得降级处理
IE 完全不识别 <details>，所有内容默认展开且无法折叠。如果必须兼容 IE，不能只依赖原生行为。
最小可行降级方案：
- 检测支持性：
if (!('open' in document.createElement('details'))) - 对 IE 用户，改用
max-height+overflow: hidden动画控制显隐，并手动维护一个布尔状态变量 - 避免引入完整 accordion 库——就几条回复时，手写
el.style.maxHeight = '0'+el.style.overflow = 'hidden'更可控
真正麻烦的不是折叠动作本身，而是确保每次 DOM 更新后状态同步，以及键盘导航不中断。这点容易被忽略，但一上线就被辅助技术用户立刻发现。
