Bootstrap 5 的 offcanvas 可实现响应式侧边菜单，移动端自动折叠、桌面端常驻需用 d-none/d-lg-block 响应式类分离两套结构，遮罩与菜单样式须分别定制，JS 控制需确保 DOM 就绪并使用 getInstance 避免重复初始化。
用 Bootstrap 5 的 offcanvas 实现侧边展开菜单
bootstrap 5 原生支持响应式侧边菜单，核心是 offcanvas 组件，不需要手写 css 遮罩或 js 控制显隐逻辑。它默认带背景遮罩（offcanvas-backdrop）、键盘关闭（esc）、点击遮罩关闭、动画过渡，且在移动端自动启用，在桌面端可设为常驻或禁用。
关键点：必须用 data-bs-toggle="offcanvas" 触发，容器要有 offcanvas 类和 data-bs-placement（如 "start" 或 "end"），遮罩行为由 data-bs-backdrop 和 data-bs-keyboard 控制。
-
data-bs-placement="start"→ 左侧滑出；"end"→ 右侧滑出 -
data-bs-backdrop="true"（默认）→ 点击灰色半透遮罩关闭菜单 -
data-bs-backdrop="static"→ 遮罩存在但不响应点击（需手动关闭） -
data-bs-keyboard="false"→ 禁用 Esc 关闭（慎用，影响可访问性）
如何让菜单在桌面端保持展开、移动端才收进侧边栏
Bootstrap 的 offcanvas 默认只在 max-width: 991.98px（即 lg 断点以下）生效。想“桌面常驻+移动端折叠”，不能靠 JS 切换类，而是用响应式工具类组合控制显隐。
思路：给 offcanvas 容器加 class="d-none d-lg-block"（桌面显示、移动端隐藏），同时用一个独立的 offcanvas 专供移动端使用，并用 class="d-lg-none" 隐藏它在桌面端。
- 桌面导航：用常规
nav+col或navbar，不参与 offcanvas - 移动端专属 offcanvas：仅含折叠后的菜单项，触发按钮放在
navbar-toggler位置 - 不要试图用 JS 强行 show/hide 同一个 offcanvas —— 它的 DOM 结构和事件绑定依赖初始化时机，混用易导致 backdrop 残留或关闭失效
自定义遮罩颜色和菜单背景时容易踩的坑
遮罩层（.offcanvas-backdrop）和菜单主体（.offcanvas）是两个独立元素，CSS 作用域隔离明显。直接写 .offcanvas { background: #222 } 有效，但改遮罩色必须针对 .offcanvas-backdrop，且需用 !important 覆盖 Bootstrap 的内联 opacity 样式。
- 遮罩变深灰：
.offcanvas-backdrop { background-color: rgba(0,0,0,0.7) !important; } - 菜单背景透明化：
.offcanvas { background-color: rgba(255,255,255,0.95); backdrop-filter: blur(4px); }（注意 Safari 需加-webkit-backdrop-filter） - 切勿修改
.offcanvas.show的transform值 —— 这会破坏动画队列，导致菜单卡在半开状态 - 如果用了
position: fixed的顶部导航，offcanvas 展开时页面可能轻微滚动，加body.offcanvas-open { overflow: hidden; }可修复（Bootstrap 5.3+ 已内置该 class）
JavaScript 手动控制时 show() 和 hide() 的调用时机
通过 JS 调用 bootstrap.Offcanvas.getInstance(el).show() 是安全的，但前提是 DOM 已就绪、且该元素已完成 Bootstrap 初始化。常见错误是脚本执行早于 DOMContentLoaded，或在动态插入的节点上调用未初始化的实例。
- 推荐写法：
document.addEventListener('DOMContentLoaded', () => { const myOffcanvas = document.getElementById('myOffcanvas'); const bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas); // 后续可安全调用 bsOffcanvas.show() }); - 避免重复初始化：
bootstrap.Offcanvas.getInstance(el)返回已有实例，比new bootstrap.Offcanvas(el)更稳妥 - 监听关闭事件用
myOffcanvas.addEventListener('hidden.bs.offcanvas', ...)，不是hide（后者是触发前事件） - 如果菜单内容是异步加载的（如从 API 拉菜单项），应在
shown.bs.offcanvas回调里操作 DOM，确保动画完成后再渲染
offcanvas 的 body 锁定机制可能被干扰，建议优先用原生方案，而非重写一套 toggle 逻辑。 
