details标签不能可靠实现侧边栏伸缩，因其非为此设计；应使用checkbox+label+~选择器的纯css方案，details仅宜作为侧边栏内折叠区块。
details 标签在两栏布局的侧边栏中**不能可靠实现伸缩控制**，它不是为这种场景设计的。强行用它做侧边栏开关，会遇到点击无响应、状态不同步、动画缺失、遮罩关闭失效等实际问题。
为什么details在侧边栏里点不动或不收起
最常见原因是结构非法：summary没放在details第一个子位置。比如套了<div>、加了空格、或前面有注释，浏览器就直接忽略交互逻辑，summary 变成普通文本。
<ul>
<li>
<code>details 必须是块级容器，部分旧版 Safari 默认 display: inline，要显式写 display: block
summary 里嵌 <button></button> 或 <a></a>，它们会劫持点击事件，导致原生 toggle 失效summary 的热区识别较弱，建议加 cursor: pointer 和 min-height: 1.5em
open 属性，首屏不会展开；JS 动态设置要用 el.open = true，别用 setAttribute('open', 'true')
details[open]无法驱动侧边栏宽度/图标旋转
details[open] 是个 CSS 伪类，只能控制内部样式，不能联动外部 DOM 状态。比如你想让侧边栏从 260px 缩到 64px，同时图标旋转 180°，靠这个选择器做不到。
- 没有全局状态信号，多个
details之间互不影响，无法实现“展开一个、收起其余”的手风琴效果 - 无法用 CSS 捕获“当前是否展开”来切换父容器宽度，必须靠 JS 变量（如 Vue 的
menuCollapse）统一驱动 - 图标旋转不能只依赖
details[open] summary::before，Safari 对::marker支持差，且旋转动画和宽度变化需同步触发 - 如果用
getComputedStyle读取元素宽度反推状态，SSR 或 hydrate 阶段容易出错
想用纯 CSS 实现侧边栏伸缩，该用什么
推荐用 <input type="checkbox"> + <label></label> + ~ 选择器组合，这是真正适合移动端侧边栏的纯 CSS 方案。
- 隐藏 checkbox 控制状态，label 点击触发切换，语义清晰、无障碍友好
- 用
input:checked ~ .sidebar控制侧边栏显隐和宽度，可配合transition: width 0.3s - 图标旋转、文字显隐都绑定到同一状态，避免不同步
- 支持点击遮罩层关闭（用绝对定位
<div class="overlay"> 覆盖页面，再用 <code>input:not(:checked) ~ .overlay控制显示） -
details只适合放在侧边栏内部，作为 FAQ、设置项等可折叠区块，别让它扛主菜单开关职责
真正难的不是让某个标签动起来，而是让状态、样式、交互、可访问性四者对齐。用 details 做侧边栏，等于把门把手装在锁芯上——看着能拧，其实打不开。
