Bootstrap 5侧边栏折叠需手动初始化Collapse实例并配合CSS过渡，因移除jQuery依赖及自动绑定逻辑；须添加collapse类、唯一ID，用JS调用toggle()，同步aria属性并处理移动端适配与无障碍。
Bootstrap 5默认不提供侧边导航折叠组件
Bootstrap 5移除了所有jQuery依赖，也删掉了v4中基于data-toggle和data-target的collapse JS插件自动绑定逻辑（虽然collapse JS模块仍存在，但需手动初始化）。这意味着你不能像v4那样只写data-bs-toggle="collapse"就让侧边栏收起——它压根不会响应，除非你显式调用bootstrap.Collapse构造函数。
用bootstrap.Collapse手动控制侧边栏折叠
核心是把侧边导航容器（如<div class="sidebar">）设为collapse元素，并用JS实例控制其状态。注意：必须确保Bootstrap 5的JS已加载，且DOM就绪后执行。
常见错误现象：Uncaught TypeError: bootstrap__WEBPACK_IMPORTED_MODULE_0__.Collapse is not a constructor —— 多因未正确引入bootstrap.bundle.min.js（含Popper），或在DOMContentLoaded前执行JS。
- 给侧边栏容器添加
class="collapse"和唯一id（如id="sidebarNav"） - 折叠按钮（如汉堡图标）绑定
click事件，调用myCollapse.toggle() - 若需默认展开，加
show类：class="collapse show"；否则初始隐藏 - 避免重复初始化：检查
data-bs-collapse是否已存在，或用getOrCreateInstance
const sidebar = document.getElementById('sidebarNav');
const myCollapse = new bootstrap.Collapse(sidebar, {
toggle: false // 手动控制，不自动触发
});
document.getElementById('toggleBtn').addEventListener('click', () => {
myCollapse.toggle();
});
配合CSS微调折叠动画与布局
Bootstrap 5的.collapse仅控制height和overflow，对width折叠（侧边栏常需收缩宽度）无直接支持。必须自己补CSS，否则会看到高度坍缩但宽度不变、内容错位。
立即学习“前端免费学习笔记（深入）”；
使用场景：左侧垂直导航栏，点击按钮时从250px缩为60px（仅图标），同时文字淡出。
- 用
transition同时过渡width、opacity和padding，别只动width，否则生硬 - 折叠时隐藏文字：给
.sidebar .nav-link span加opacity: 0并设transition - 用
min-width和max-width配合flex布局，避免收缩后子元素撑开容器 - 注意
overflow: hidden必须加在父容器上，否则缩窄后内容溢出
.sidebar {
transition: width 0.3s ease, padding 0.3s ease;
}
.sidebar.collapsed {
width: 60px;
padding: 0.5rem 0;
}
.sidebar.collapsed .nav-link span {
opacity: 0;
transition: opacity 0.2s ease;
}
移动端适配与无障碍注意事项
纯CSS折叠在小屏下容易失效，尤其当max-width断点与JS触发时机冲突时。另外，aria-expanded和aria-controls缺失会导致屏幕阅读器无法识别状态。
- 在JS中同步更新按钮的
aria-expanded属性：btn.setAttribute('aria-expanded', myCollapse._isShown) - 折叠后禁用非可见区域的链接聚焦（用
tabindex="-1"动态控制），否则键盘用户会卡在不可见菜单项 - 移动端建议保留“始终展开”逻辑（用
@media (max-width: 992px)重置width为auto），因为小屏空间有限，折叠意义不大 - 避免用
display: none替代collapse，否则bootstrap.Collapse实例会失去对DOM节点的引用
Collapse实例、CSS过渡和语义属性来实现。最易被忽略的是aria属性同步和移动端断点覆盖，这两处不处理，功能就算跑通，体验和可访问性也会打折扣。 
