答案：通过position固定侧边栏，transition实现宽度动画，JavaScript控制collapsed类切换，配合z-index和margin调整布局，实现平滑折叠效果。
侧边栏折叠效果在现代网页布局中非常常见，尤其适用于后台管理系统或移动端导航。通过结合 position 定位与 transition 过渡动画，可以轻松实现平滑的展开与收起效果。下面介绍具体实现方法。
1. 基础结构与定位设置
使用 position: fixed 可以让侧边栏固定在页面一侧，不会随内容滚动而移动。通常将其放置在左侧或右侧。
示例结构：侧边栏默认宽度设为一个固定值（如 250px），折叠时变为一个窄条（如 60px）。通过改变宽度和内部文字的显示状态来实现视觉上的折叠。
2. 使用 transition 实现平滑动画
CSS 的 transition 属性可以让宽度变化过程变得流畅，而不是瞬间切换。
立即学习“前端免费学习笔记（深入）”；
关键样式：- 给侧边栏添加 transition: width 0.3s ease，使宽度变化带有缓动效果
- 配合 JavaScript 切换类名（如 .collapsed）来触发宽度变化
- 可同时隐藏文字、调整图标位置，增强用户体验
3. 配合 JavaScript 控制状态
虽然纯 CSS 可通过 :hover 或 checkbox 实现简单交互，但实际项目中通常用 JavaScript 控制类的添加与移除。
操作逻辑：- 点击按钮时，给侧边栏元素添加或移除 collapsed 类
- 该类将侧边栏 width 改为 60px，并隐藏文本内容
- 主内容区域可相应调整 margin 或 left 值，避免被遮挡
4. 处理布局适配与层级问题
使用 position: fixed 时要注意 z-index，确保侧边栏不会被其他元素覆盖或遮挡内容。
建议：- 设置侧边栏 z-index: 1000 保证其在顶层
- 主内容区使用 margin-left 动态调整，响应侧边栏状态
- 在小屏幕下可考虑改为滑动式抽屉（从屏幕外滑入）
基本上就这些。利用 position 固定位置，transition 控制动画节奏，再通过 JS 切换状态，就能做出简洁实用的折叠侧边栏。关键是保持结构清晰，动画自然，不影响整体布局流。不复杂但容易忽略细节。
