应设width: 0 + overflow: hidden + padding: 0 + border: none，并确保父容器flex下主内容区有flex: 1或min-width: 0；必须同步更新aria-expanded与aria-hidden，推荐用transform: translateX()替代width动画以避免重排。
侧边栏折叠时 width 和 overflow 怎么设才不遮挡内容
折叠后侧边栏必须视觉隐藏但保留 DOM 结构，否则 document.querySelector 会失效、焦点管理出错。常见错误是直接用 display: none 或 visibility: hidden，导致内部菜单项无法被键盘导航或屏幕阅读器识别。
正确做法是用 width: 0 + overflow: hidden + padding: 0 + border: none 组合收窄，同时保留 flex 布局流。若父容器是 display: flex，记得给主内容区加 flex: 1 或 min-width: 0 防止溢出。
-
width: 0是折叠核心，不是max-width—— 后者在 flex 容器中常被忽略 - 必须显式设置
overflow: hidden，否则子元素（如图标、文字）可能撑开容器 - 避免用
transform: scaleX(0)：会导致子元素无法触发:hover，且焦点仍在但不可见
动态菜单渲染时 aria-expanded 和 aria-hidden 怎么同步更新
菜单展开/折叠不只是样式切换，辅助技术依赖 ARIA 属性判断可访问性状态。漏掉或写反 aria-expanded 会让屏幕阅读器误报“已展开”而实际收起，用户反复点击无响应。
关键逻辑是：菜单容器（如 <ul class="menu"></ul>）上设 aria-hidden，其直接父级按钮（如 <button class="toggle-btn"></button>）上设 aria-expanded，二者值必须相反且实时同步。
立即学习“前端免费学习笔记（深入）”；
- 展开菜单 → 按钮
aria-expanded="true"，菜单aria-hidden="false" - 折叠菜单 → 按钮
aria-expanded="false"，菜单aria-hidden="true" - 用
Element.setAttribute()而非innerHTML更新，避免重绘中断焦点
折叠动画卡顿？transition 别只写 width
仅对 width 做 transition 在 Chrome/Firefox 中容易跳帧，尤其当侧边栏含图标字体或 SVG 时。本质是 width 变化触发 layout，浏览器需重排整个 flex 容器。
更稳方案是改用 transform: translateX() + opacity 复合过渡，把侧边栏“滑出视口”，主内容区用 margin-left 补位（而非靠 flex 自适应），这样全程只触发合成层，不触发 layout。
- 折叠态：侧边栏
transform: translateX(-100%)，主内容区margin-left: 0 - 展开态：侧边栏
transform: translateX(0)，主内容区margin-left: 240px（按实际宽度） - 务必加
will-change: transform提前提示合成，但别滥用在所有元素上
移动端适配时 resize 监听和 matchMedia 怎么选
响应式折叠不能只靠 CSS 媒体查询自动切换——用户手动拖拽浏览器窗口时，JS 必须感知并更新菜单状态。但 window.addEventListener('resize') 频率太高，易造成抖动；而 matchMedia 是声明式监听，性能更好且支持移除。
推荐组合：初始化时用 matchMedia('(max-width: 768px)') 判断是否应默认折叠，后续用 mql.addListener()（或现代 addEventListener('change')）响应断点变化。
- 不要在
resize回调里直接操作 DOM 类名，先用requestAnimationFrame节流 -
matchMedia对象可复用，不必每次新建；断点匹配后，再调用统一 toggle 函数 - 注意 Safari 旧版不支持
addEventListener('change')，降级用addListener
