原生details标签不支持多级嵌套展开，因toggle事件冒泡导致外层联动；summary文本截断异常、键盘导航易破坏、移动端点击热区过小、默认关闭需显式加open属性。
details标签默认不支持多级嵌套展开
直接在 <details> 里再套一个 <details> 是合法的，但多数浏览器（Chrome、Firefox）下内层 <summary> 点击会同时触发外层折叠——不是 bug，是规范行为：父 <details> 的 toggle 事件会冒泡并影响自身状态。实际做功能对比时，如果想让「性能参数」里再分「CPU」「GPU」「内存」各自独立展开，得绕开原生嵌套。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用 CSS 隐藏外层
<summary>的默认箭头（list-style: none），再用伪元素或图标手动控制视觉层级 - 把内层结构换成
<div>+ JS 控制display或max-height动画，仅保留外层用<details>做主模块开关 - 避免在
<summary>里放<button>或<input>，否则焦点和点击行为容易冲突
summary内容过长时文字截断不自然
<summary> 是可替换元素（replaced element），其内部文本换行、省略号（text-overflow: ellipsis）在部分浏览器中不生效，尤其当里面混有 <span> 或内联样式时。产品对比页常需显示「最大并发连接数：10,000+（企业版专属）」这类带括号说明的标题，一截就断在括号前，体验割裂。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 统一用单行纯文本，避免内嵌标签；需要强调部分用
<strong>而非<span style="color:…"> - 加 CSS：
summary { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }，并确保父容器有固定宽度或max-width - 真要多行摘要？放弃
<summary>的语义，改用<button type="button">+ ARIA：aria-expanded和aria-controls手动管理
键盘操作不兼容屏幕阅读器的常见写法
原生 <details> 支持空格/Enter 展开，但如果你给 <summary> 加了 tabindex="-1" 或覆盖了 onclick，就会破坏键盘导航链。产品对比页常被合规团队抽查，而「按 Tab 键跳过所有对比项」是典型失败案例。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 别碰
tabindex，让<summary>保持默认可聚焦状态（它天然就是） - 不要用
event.preventDefault()拦截 summary 的 click，除非你完整重写了 expand/collapse 逻辑并同步更新aria-expanded - 对比项较多时，在
<details>上加role="region"和aria-labelledby指向 summary 的 id，帮读屏软件定位上下文
移动端点击区域太小导致误操作
<summary> 默认只有文字区域响应点击，iOS Safari 下经常点不中，用户以为功能失效。产品对比页常放在手机竖屏底部，拇指点击半径有限，而「加密方式支持」这类条目文字又短。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 扩大热区：
summary::before { content: ""; position: absolute; top: -10px; right: -10px; bottom: -10px; left: -10px; } - 加最小高度：
summary { min-height: 44px; display: flex; align-items: center; }（符合 iOS 可点击区域规范） - 避免在 summary 里用
margin-top推开内容，这会让热区和视觉分离，测试时用 Chrome DevTools 的「Toggle device toolbar」+「Capture node screenshot」验证真实点击范围
细节上最易被忽略的是：所有 <details> 默认是关闭的，但产品对比页往往希望关键项（比如「免费版限制」）默认展开——必须显式加 open 属性，且不能靠 JS 后置设置，否则 SSR 或首屏渲染时会闪一下。这个属性没有布尔值变体，只写 open 就行，别写 open="true"。
