Bootstrap Collapse 可直接驱动侧边栏折叠动画，无需手写 CSS 动画；关键在于结构正确（collapse 类+唯一 ID+data-bs-target 匹配）、避免 height/auto 和 overflow 冲突、响应式下与布局控制协作而非替代。
用 Bootstrap Collapse 组件实现侧边栏折叠，不是靠写 CSS 动画
bootstrap 5 的 collapse 插件本身就能驱动侧边栏的展开/收起动画，不需要手写 transition 或 @keyframes。它的动画逻辑是：通过 js 动态计算高度、配合 css 的 height + overflow + transition 实现平滑过渡。你只要结构对、属性对，动画就自动生效。
常见错误现象：
– 点击没反应 → 漏了 data-bs-toggle="collapse" 或 data-bs-target 指向错误 ID
– 动画卡顿或直接跳变 → 目标元素有 height: auto 或 overflow: visible 冲突
– 折叠后内容被截断 → 忘记给父容器加 overflow: hidden
实操建议：
– 侧边栏容器必须同时有 class="collapse" 和唯一 id
– 触发按钮（如汉堡图标）必须带 data-bs-toggle="collapse" 和匹配的 data-bs-target="#sidebar-id"
– 默认收起：只写 collapse；默认展开：加 show 类（即 class="collapse show"）
– 若侧边栏是固定定位（position: fixed），需额外确保其父级不干扰 overflow 计算（常设 html, body { overflow-x: hidden; }）
响应式下侧边栏隐藏逻辑和 collapse 不冲突，但得分开处理
折叠（collapse）解决的是「内容显隐+动画」，而「大屏隐藏侧边栏」属于布局控制，靠的是 Bootstrap 网格类（如 col-md-2）配合媒体查询下的 margin-left: -250px 或 transform: translateX(-100%)。这两者不是替代关系，而是协作关系：collapse 控制内容区是否渲染，CSS 布局控制它在页面中的位置。
使用场景：
– 小屏（xs/sm）：侧边栏默认折叠，靠 collapse 控制开闭
– 中大屏（md+）：侧边栏常驻，但可点击按钮收进屏幕左侧（此时用负 margin + transition，不走 collapse）
容易踩的坑：
– 在 min-width: 992px 媒体查询里给 .collapse 元素加 display: none → 动画失效，且 JS 状态不同步
– 同时对侧边栏应用 collapse 和 transform 过渡 → 浏览器可能无法同时插值两个动画属性，导致抖动
– 忘记在大屏隐藏时同步更新触发按钮的 aria-expanded 属性 → 可访问性断裂
多级嵌套菜单必须用 accordion，别硬套 collapse
如果侧边栏里有二级菜单（比如「系统设置」下拉出「用户管理」「角色权限」），单用 collapse 会导致点开一个，其他还开着，视觉混乱。这时必须升级为 accordion 模式 —— 它通过 data-bs-parent 强制互斥，天然适配导航树结构。
参数差异：
– 单个 collapse：只管自己显隐，无联动
– accordion：外层容器加 class="accordion" + 唯一 id，每个子项用 class="accordion-item" 包裹，子项内触发器加 data-bs-parent="#accordion-id"
实操建议：
– 不要给每个二级菜单单独写 data-bs-toggle="collapse" 而不设 data-bs-parent
– accordion 不要求所有子项都展开，可以部分默认 show，部分默认收起
– 若某一级菜单需要「点击跳转 + 同时展开子项」，得用 JS 手动触发（new bootstrap.Collapse(element)），不能只靠 data 属性
动画失效的三个高频原因和对应检查点
不是 Bootstrap bug，90% 是 HTML 结构或样式冲突导致。重点查这三项：
– height 值未被正确计算：
• 目标元素内含浮动子元素（float: left）→ 加 clearfix 或用 display: flex
• 子元素用了 position: absolute → collapse 高度不包含它们，动画会“塌陷”
• 目标元素设置了 min-height 或 max-height → 与 collapse 的 height 过渡冲突，建议清空
– overflow 阻断动画：
• 父容器有 overflow: hidden 但高度不够 → 动画中途被裁剪
• 目标元素自身有 overflow: hidden 且未配 height 过渡 → 表现为“闪现”而非滑动
– JS 初始化失败：
• 页面加载时目标元素还没插入 DOM → 改用事件委托或 DOMContentLoaded 后初始化
• 使用了 bootstrap.bundle.min.js 但误引了不带 Popper 的版本 → collapse 依赖 Transition 插件，必须用 bundle 版本
