答案：通过HTML结构搭建侧边栏与主内容区，利用flex布局设置固定与自适应宽度，结合transform实现平滑动画，JavaScript控制collapsed类切换状态，配合@media query在小屏下默认隐藏侧边栏并添加遮罩层优化交互体验。
实现一个响应式可折叠的侧边栏，核心是结合 CSS 的 @media query 判断屏幕尺寸，配合 transform 实现平滑动画效果。整个流程不复杂，关键在于结构清晰和状态管理。
1. 布局结构与基础样式
先搭建基本 HTML 结构，包含一个侧边栏和主内容区域：
<div class="layout">
<aside class="sidebar">
<ul>
<li>首页</li>
<li>设置</li>
<li>用户</li>
</ul>
</aside>
<main class="main-content">
<button class="toggle-btn">☰ 菜单</button>
<h1>主内容区</h1>
</main>
</div>
给侧边栏固定宽度，主内容自适应，使用 flex 布局：
.layout {
display: flex;
}
.sidebar {
width: 250px;
background: #333;
color: white;
height: 100vh;
transition: transform 0.3s ease;
}
.main-content {
flex: 1;
padding: 20px;
}
2. 添加折叠状态与按钮控制
通过 JavaScript 给 body 或 sidebar 添加类名（如 collapsed）来表示折叠状态：
立即学习“前端免费学习笔记（深入）”；
document.querySelector('.toggle-btn').addEventListener('click', function() {
document.querySelector('.sidebar').classList.toggle('collapsed');
});
用 transform 将侧边栏移出可视区域：
.sidebar.collapsed {
transform: translateX(-250px);
}
此时侧边栏会平滑滑出，点击按钮再滑回，动画由 transition 控制。
3. 使用 Media Query 自适应小屏
在移动端默认折叠侧边栏，用户点击再展开：
@media (max-width: 768px) {
.sidebar {
position: fixed;
z-index: 100;
}
.sidebar:not(.collapsed) {
transform: translateX(0);
}
.sidebar.collapsed {
transform: translateX(-250px);
}
.main-content {
margin-left: 0;
}
}
这样在小屏幕上，侧边栏默认隐藏，点击按钮后出现，不影响主内容布局。
4. 优化细节提升体验
- 添加遮罩层：小屏展开时，在主内容上加半透明遮罩，点击可收起菜单
- 过渡时间设为 0.3s 左右，太长会卡顿，太短不明显
- 确保 toggle 按钮在小屏始终可见
- 侧边栏使用 position: fixed 避免滚动错位
基本上就这些。关键是利用 transform 移动元素而不影响文档流，搭配 media query 区分设备行为，再用 JS 控制类名切换状态。不复杂但容易忽略细节。
