原生 + 在现代浏览器中稳定支持，但 ie 不支持且 safari ios 15.4 前存在点击穿透；它自带 aria、键盘操作和焦点管理；图标需用 [open] 属性控制；外部点击不能关闭，需 js 实现；高度动画需 js 测高并配合 transition 和 overflow: hidden。
DETAILS 和 SUMMARY 元素的基本行为是否可靠
原生 <details></details> + <summary></summary> 在现代浏览器中已稳定支持（Chrome 12+、Firefox 12+、Safari 6+、Edge 79+），无需 polyfill。但要注意：IE 完全不支持，且 Safari 在 iOS 15.4 之前存在 summary 点击穿透问题（例如内嵌 button 会触发两次事件）。
它不是“模拟展开”，而是语义化原生控件，自带 ARIA 属性（aria-expanded 自动切换）、键盘支持（空格/回车可展开）、焦点管理 —— 这些是手写 JS 展开逻辑很难完整复现的。
如何让 SUMMARY 显示图标并同步旋转状态
不能只靠 :hover 或固定 class，必须响应真实展开状态。用 <details></details> 的 [open] 属性做 CSS 钩子最稳妥：
summary::marker {
content: "▶ ";
}
details[open] > summary::marker {
content: "▼ ";
}
如果要用自定义 SVG 或字体图标（比如 Font Awesome）：
- 把图标放在
<summary></summary>内部（如<span class="icon"></span>），再用details[open] .icon { transform: rotate(180deg); } - 避免用 JS 切换 class 控制图标，否则可能和原生
open状态不同步（比如用户用键盘操作时） - 注意
transform在 Safari 中需加-webkit-transform前缀（iOS 15.6 及更早版本）
点击 SUMMARY 外区域是否能关闭 DETAILS
原生行为是：**不能**。只有再次点击 <summary></summary> 或按 Esc 键才能收起。这是 WAI-ARIA 推荐做法（避免意外关闭），但业务常要求“点击遮罩层关闭”。
若真要实现，必须用 JS 监听 details 外部点击：
document.addEventListener('click', (e) => {
const details = e.target.closest('details');
if (!details && document.querySelector('details[open]')) {
document.querySelector('details[open]').removeAttribute('open');
}
});
但要注意几个坑：
- 点击
summary本身也会触发该事件，需用e.target === details.querySelector('summary')过滤 - 移动端 click 有 300ms 延迟，建议改用
pointerdown并e.preventDefault()防止误触 - 破坏默认可访问性流，屏幕阅读器用户可能困惑 —— 收起动作不再聚焦在 summary 上
内容区高度动画为什么失效，怎么补
<details></details> 展开时内容是“突然显示”，因为 height: auto 无法被 CSS 动画过渡。这是原生限制，不是 bug。
要加平滑高度动画，只能用 JS 测量并设置固定 height：
- 监听
toggle事件（details元素在展开/收起时触发） - 展开前：设
height: 0→ 强制重排 → 设height: [滚动高度]px - 收起时：设
height: [当前高度]px→offsetHeight强制重排 → 设height: 0 - CSS 中写
transition: height 0.2s ease，但必须配合overflow: hidden
别忘了动画结束后清理内联样式（否则影响后续 JS 操作），也别对 display: none 元素测高 —— 要确保元素在文档流中（visibility: hidden 可行）。
细节交互里最容易被忽略的，其实是动画结束后的 focus 管理和键盘焦点恢复 —— 展开后如果不把焦点移到内容区首元素，键盘用户就卡在 summary 上了。
