details标签默认不支持嵌套展开，是规范行为而非bug；需用css重置display、清除列表样式、隔离open状态，并用max-height模拟height过渡动画。
details 标签默认行为不支持嵌套展开？得用 CSS 强制重置
details 元素原生只允许单层展开，点击子 details 会触发父级收起——这不是 bug，是规范行为。浏览器把嵌套 details 当作“父子联动”处理，所以侧边栏里带子菜单时，必须用 CSS 隔离状态。
关键做法是：给每个 details 设置 display: block（它默认是 display: list-item），再对 summary 使用 display: flex 或 display: grid 控制布局，避免继承父级的列表样式干扰。
常见错误现象：summary 前出现默认三角箭头 + 缩进，且子项点击后整个父 details 关闭。
- 加
details { display: block; }消除列表行为 - 加
summary { list-style: none; padding-left: 0; }去掉缩进和箭头残留 - 子
details必须独立于父details的open状态，不能靠 HTML 嵌套实现逻辑关联
用 CSS 控制展开动画，transition 不能直接作用于 height: auto
想让手风琴有高度过渡效果，但 height: auto 无法被 transition 动画——这是最常卡住的地方。浏览器不知道 “auto” 对应多少像素，没法插值。
解决方案只有两个：用 max-height 模拟，或用 JS 测高后设固定值。前者更轻量，适合静态内容侧边栏。
- 设
details[open] > * { max-height: 500px; transition: max-height 0.25s ease-in-out; } - 设关闭态
max-height: 0，并加overflow: hidden防内容溢出 - 500px 要略大于子内容最大可能高度；太小会截断，太大动画拖沓
- 如果子项含图片或异步加载内容，高度预估不准，动画会突兀——此时建议改用
opacity+transform: scaleY()组合
侧边栏中 summary 点击区域太小？用伪元素扩大热区
原生 summary 只有文字区域响应点击，侧边栏常需整行可点。不能简单加 width: 100%，因为 summary 是替换元素，宽高行为特殊。
可靠做法是用 ::after 伪元素撑开点击区域，同时保持语义结构不变。
- 加
summary { position: relative; padding: 8px 12px; } - 加
summary::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } - 确保父容器有
position: relative或position: static（默认即可） - 避免给
summary设display: block后又忘掉清除默认 margin，否则伪元素会偏移
移动端点击穿透或响应延迟？检查 pointer-events 和 focus 状态
在 iOS Safari 或某些安卓 WebView 中，details 点击可能无反应，或要连点两次才展开。常见原因是：父容器加了 pointer-events: none，或 summary 被其他元素（如图标字体、伪元素）遮挡但没设 pointer-events: auto。
另一个隐蔽问题是：用键盘 Tab 进入 summary 后按空格不触发，因为部分浏览器不把 summary 当可交互焦点元素处理。
- 确保
summary没被z-index更高的透明层覆盖 - 加
summary { pointer-events: auto; }显式启用 - 为无障碍考虑，加
summary:focus { outline: 2px solid #007bff; }并测试空格键是否生效 - 若仍无效，可在
summary上监听click事件，手动切换open属性（但会破坏原生语义）
侧边栏手风琴真正难的不是展开逻辑，而是各种浏览器对 details 的非一致渲染细节，比如 Safari 的 summary 默认上下 padding、Chrome 对 max-height 过渡的帧率抖动、Firefox 在 flex 容器里对 details 的基线对齐异常——这些都得靠真实设备+DevTools 逐个验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
