侧边栏折叠时需同步处理CSS类、DOM属性、焦点位置和屏幕阅读器感知。应使用display: none配合aria-hidden、手动管理焦点、inert或tabindex="-1"禁用交互，并避免仅依赖visibility或opacity隐藏。
侧边栏折叠时如何避免内容被遮挡
折叠后内容区域被侧边栏盖住，本质是 z-index 和定位层级没理清。常见于用 position: fixed 或 absolute 实现的侧边栏，一旦折叠只是隐藏了自身，却没释放空间或调整堆叠上下文。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 折叠状态必须同时控制显示（
display: none）和定位属性（如移除fixed），不能只靠visibility: hidden或opacity: 0 - 主内容区加
margin-left或transform做位移时，要确保该偏移在折叠后被重置为0，否则留白或错位 - 若侧边栏使用
transform: translateX(-100%)折叠，需确认父容器有overflow: hidden，否则滑出部分仍可点击或触发滚动条
用 CSS @media + class 切换实现响应式折叠
纯 CSS 方案最轻量，适合移动端优先、桌面端展开的场景。关键不是“响应式”本身，而是媒体查询与类名配合的时机是否准确。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 定义两个基础状态类：
.sidebar--collapsed（折叠）和.sidebar--expanded（展开），不要只依赖@media内联样式，否则 JS 控制时会冲突 -
@media (max-width: 768px)中强制启用.sidebar--collapsed，但允许用户手动展开（比如点击按钮后加.sidebar--expanded） - 过渡动画用
transform而非width，避免重排；搭配transition: transform 0.3s ease即可，别加height或margin
JavaScript 控制折叠状态时 DOM 更新不及时
点击按钮后侧边栏没动，或者动了但主内容区没同步位移——大概率是 class 切换后样式未生效，或事件监听绑定在错误节点上。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
element.classList.toggle('sidebar--collapsed')，别直接操作className字符串，避免覆盖其他类 - 如果主内容区依赖 JS 计算宽度（比如
document.body.clientWidth），注意折叠前后触发resize事件不可靠，应显式调用重绘逻辑 - 避免在
click回调里连续多次修改 class，浏览器可能合并渲染；需要立即生效时，可用getComputedStyle(element).transform强制触发重排
折叠后焦点管理与可访问性问题
键盘用户按 Tab 键时，焦点仍会进入已折叠的侧边栏元素，甚至卡死。这不是视觉问题，而是 display: none 之外的隐藏方式没切断可访问树。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 折叠时除了
display: none，还要加aria-hidden="true"；展开时设为"false" - 焦点必须在折叠后移回触发按钮（
button.focus()），否则键盘流中断 - 若侧边栏含表单控件，折叠前用
inert属性（现代浏览器支持）或手动tabindex="-1"批量禁用，比仅靠display更可靠
