details必须配summary且仅能为首子元素，因浏览器仅将首个子节点识别为触发区；嵌套需逐层包裹，缩进用CSS变量自动计算；持久化靠localStorage存ID并监听toggle事件；回复按钮须置于summary外以保障可访问性。
details 和 summary 是 HTML 原生支持评论折叠的最简方案，但直接套用会出问题——比如嵌套回复错位、缩进失效、点击无响应。得按结构层级和语义规则来组织。
为什么details必须配summary且只能是首子元素
浏览器只认 details 的第一个子节点为触发区，如果写成 <details><p>标题</p>
<div>内容</div></details>，点击完全没反应。评论区每条回复都要独立包裹，不能把所有 details 堆在同一个父容器里再统一控制。
-
summary必须紧贴details开始标签后，中间不能有文本或空格 - 多级嵌套回复时，子
details要放在父级details的内容区内部（即summary之后、之前） - 不支持
details直接嵌套另一个details在某些 Safari 版本中会失效，稳妥做法是外层用details，内层改用 JS 控制的div+max-height
怎么让子评论自动缩进又不写死 class
纯 HTML 不会自动识别嵌套深度，margin-left 硬编码 20px / 40px / 60px 很难维护。推荐用 CSS 自定义属性配合层级计算：
details { --depth: 0; }
details[open] > summary::before { content: "▼ "; }
details > details { --depth: calc(var(--depth) + 1); }
.replies { margin-left: calc(var(--depth) * 24px); }这样每嵌套一层，--depth 就加 1，缩进值自动叠加。注意 .replies 必须是子 details 的直接父容器，否则变量无法继承。
立即学习“前端免费学习笔记（深入）”；
折叠状态怎么持久化？open 属性不够用
open 只控制初始状态，刷新就重置。用户展开某条评论后离开页面，回来还得再点一次——这不是体验问题，是逻辑缺失。
- 不能依赖
localStorage存整个 DOM 结构（序列化失败风险高） - 应该只存 ID 或索引，例如
localStorage.setItem('comment-open', JSON.stringify([1024, 1056])) - 页面加载后遍历所有
details，比对 ID，匹配则加open属性：el.setAttribute('open', '') - 监听
toggle事件更新存储：el.addEventListener('toggle', () => { /* 更新 localStorage */ })
summary 里放「回复」按钮会破坏可访问性
屏幕阅读器会把 summary 内所有交互元素（按钮、链接）都当作折叠开关的一部分，导致误读或操作冲突。
- 「回复」按钮必须放在
summary外部，比如紧贴在它后面或评论底部 - 若必须放在标题行内，改用
span+aria-label，并禁用键盘焦点：tabindex="-1" - 避免在
summary中使用button或a，哪怕加了event.stopPropagation()也难保所有辅助技术兼容
真正麻烦的不是怎么展开，而是展开后内容高度动态变化（比如异步加载图片或长文本渲染完成），此时靠预设 max-height 的 JS 方案容易截断或动画卡顿——这种场景下，原生 details 反而更稳，只是得接受它没有过渡动画。
