响应式侧边栏折叠通过CSS媒体查询、Flexbox布局和JS类切换实现。默认侧边栏宽250px，点击按钮触发collapsed类，宽度变为60px，文字隐藏；结合transition实现动画效果。@media (max-width: 768px)时，移动端默认折叠，主内容区适配margin。关键细节包括overflow: hidden与white-space: nowrap，防止文本溢出，确保收起状态美观稳定。结构清晰，兼容性强，适用于管理后台等多场景。
响应式侧边栏折叠的关键在于结合 CSS 媒体查询、Flexbox 布局和状态切换类，实现在不同屏幕尺寸下自动或手动收起侧边栏。下面是一种实用且简洁的实现方式。
1. 基础布局结构
使用一个包含侧边栏和主内容区的容器，通过 Flexbox 实现横向排布：
首页
设置
帮助
主内容区
2. 默认样式与折叠状态
设置侧边栏默认宽度，在小屏幕上隐藏文字只保留图标，或完全收起：
.sidebar {
width: 250px;
background: #333;
color: white;
transition: width 0.3s ease;
overflow: hidden;
}
.sidebar.collapsed {
width: 60px;
}
.sidebar .menu-item {
padding: 15px 20px;
te
xt-align: center;
font-size: 14px;
}
.sidebar.collapsed .menu-item {
font-size: 12px;
white-space: nowrap;
overflow: hidden;
}
xt-align: center;
font-size: 14px;
}
.sidebar.collapsed .menu-item {
font-size: 12px;
white-space: nowrap;
overflow: hidden;
}
3. 响应式媒体查询
在移动端屏幕下，默认折叠侧边栏，并适配主内容区域：
@media (max-width: 768px) {
.sidebar {
width: 60px;
}
.sidebar .menu-item {
font-size: 12px;
white-space: nowrap;
overflow: hidden;
}
.content {
margin-left: 60px;
}
}
4. JavaScript 控制展开/收起
添加简单的脚本控制切换类名：
function toggleSidebar() {
document.getElementById('sidebar').classList.toggle('collapsed');
}
点击按钮后，侧边栏会在 250px 宽（展开）和 60px 宽（折叠）之间切换，文字随之隐藏或显示。配合 transition 属性，动画平滑自然。
基本上就这些。通过 CSS 控制布局与动画，JS 只负责切换类，结构清晰，兼容性好，适合大多数管理后台或移动适配场景。不复杂但容易忽略细节，比如 overflow: hidden 和 white-space 的处理，确保文字不会撑破折叠状态。
