details标签不支持多级嵌套展开，因事件冒泡被外层拦截；summary内禁放交互控件；需手动添加aria-expanded等无障碍属性；CSS动画须用max-height而非height实现。
details标签默认不支持多级嵌套展开
直接在 <details> 里再套 <details> 是合法的，但多数浏览器（Chrome、Firefox）默认只响应最外层的点击事件，内层 <summary> 点击不会触发自身展开——本质是事件冒泡被外层拦截了。
解决办法是给内层 <details> 加 onclick="event.stopPropagation();"，或者用 JS 绑定时显式阻止冒泡。更稳妥的做法是避免嵌套，改用独立的 <details> 并用 CSS 控制视觉层级（比如缩进、边框）来模拟“子问题”。
- 不要写成：
<details><summary>Q1</summary><details><summary>Q1.1</summary>...</details></details> - 推荐写法：每个 FAQ 条目都是平级
<details>，用 class 区分层级语义，例如<details class="faq-subitem"> - 注意 Safari 对嵌套
<details>的支持更差，iOS 上可能完全无响应
summary元素内容不能包含交互控件
<summary> 内如果放 <button>、<input> 或带 onclick 的 <span>，会导致点击行为冲突：有的浏览器会先触发控件事件，跳过 <details> 展开；有的则直接忽略控件。
常见错误场景是想在 summary 右侧加一个“复制答案”按钮，或“已读标记”。正确做法是把这类操作移到 <details> 内部、<summary> 下方，或用伪元素 + JS 模拟按钮位置（绝对定位），并确保绑定事件时监听的是 <details> 元素本身而非 summary 内部节点。
立即学习“前端免费学习笔记（深入）”；
- ❌ 错误：
<summary>常见问题？<button onclick="copy()">?</button></summary> - ✅ 可行：
<summary>常见问题？</summary><div class="answer"><button onclick="copy()">复制答案</button><p>这里是答案...</p></div> - ⚠️ 注意：
<summary>中使用<img>或<svg>是安全的，但不要加onclick或tabindex
无障碍访问需补全 aria-label 和 focus 管理
原生 <details> 支持键盘操作（空格/回车展开），但屏幕阅读器对状态提示不统一。部分读屏软件（如 NVDA）不会自动播报“已展开/已折叠”，用户无法感知当前状态。
必须手动通过 aria-expanded 和 aria-controls 建立关联，并监听 toggle 事件同步更新。不能依赖浏览器默认行为。
- 给
<summary>加aria-expanded="false"初始值，展开后 JS 改为"true" -
<summary>的id要和对应内容区的aria-labelledby匹配，或用aria-controls指向内容容器的id - 首次聚焦到
<summary>时，若内容已展开，应确保焦点能自然落到内容区首元素（可用details.open && summary.nextElementSibling?.focus()）
样式重置与过渡动画需绕过 open 属性限制
<details> 的 open 是布尔属性，CSS 无法直接对它做 transition（比如 height 过渡）。强行写 details[open] { height: auto; transition: height .3s; } 无效，因为 height: auto 无法插值。
真正可行的动画方案只有两种：一是用 max-height 配合足够大的固定值（如 max-height: 500px），二是用 JS 测量内容高度后动态设置 height 并过渡。前者简单但有高度上限风险；后者精准但增加复杂度。
- 推荐
max-height方案：details { overflow: hidden; } details[open] { max-height: 500px; transition: max-height .25s ease-in-out; } - 注意 Safari 对
max-height过渡支持不稳定，建议加-webkit-transition - 不要尝试
visibility+opacity，这会破坏可访问性（屏幕阅读器仍会读取隐藏内容）
<details> 展开瞬间它们才开始加载或初始化——这可能导致布局抖动或资源延迟。需要提前预加载或用 loading="lazy" 配合 JS 控制载入时机。 
