Bootstrap 5.2+ offcanvas 无需额外JS初始化，只需正确HTML结构、引入bootstrap.bundle.min.js，并确保data-bs-toggle="offcanvas"与data-bs-target="#id"及对应offcanvas的id一致；方向由offcanvas-start/end/top/bottom类控制；JS手动控制需先获取实例并避免重复初始化；遮罩、滚动、焦点等细节默认已优化但需注意样式覆盖和可访问性。
点击按钮触发 bootstrap 的 offcanvas 侧边栏
Bootstrap 5.2+ 内置了 offcanvas 组件，不需要额外 JS 初始化，只要 HTML 结构正确、引入了 Bootstrap CSS 和 JS（含 Popper），点按钮就能呼出。关键在 data-bs-toggle="offcanvas" 和匹配的 id。
常见错误是漏掉 data-bs-target 或写错 ID 值，导致点击无反应；或者没引入 bootstrap.bundle.min.js（必须含 Popper，否则定位异常）。
-
data-bs-toggle="offcanvas"必须加在触发按钮上 -
data-bs-target="#myOffcanvas"的值要和侧边栏id="myOffcanvas"完全一致（注意开头的#） - 侧边栏容器需有
class="offcanvas"，且必须包含tabindex="-1" - 推荐用
bootstrap.bundle.min.js，不是bootstrap.min.js
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#myOffcanvas"> 打开侧边栏 </button> <p></p><div class="offcanvas offcanvas-start" tabindex="-1" id="myOffcanvas"> <div class="offcanvas-header"> <h5 class="offcanvas-title">侧边栏标题</h5> <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button> </div> <div class="offcanvas-body"> 这里放内容 </div> </div>
offcanvas 默认从左边弹出，怎么改成右边或底部？
靠 offcanvas 的方向类控制：默认 offcanvas-start 是左，换成 offcanvas-end 就右，offcanvas-top 或 offcanvas-bottom 分别对应上下。
注意：方向类不能叠加，只能选一个；同时改方向不影响 JS 触发逻辑，data-bs-target 仍照常工作。
-
offcanvas-start：左侧（LTR 页面下，即常规中文页面） -
offcanvas-end：右侧 -
offcanvas-top：顶部，高度默认为auto，内容撑开 -
offcanvas-bottom：底部，同理按内容自适应高度
如果想让顶部/底部的 offcanvas 固定高度（比如占屏幕 80%），得自己加 CSS：style="height: 80vh;" 或通过 class 控制。
手动用 JS 打开/关闭 offcanvas 实例
当需要动态控制（比如表单提交后关闭，或根据条件延迟打开），就得用 JS 获取实例再调 show() / hide()。
注意：必须等 DOM 加载完再获取，否则 getElementById 返回 null；而且每个 offcanvas 是独立实例，不能跨 ID 复用变量。
- 获取实例：
const myOffcanvas = new bootstrap.Offcanvas(document.getElementById('myOffcanvas')) - 打开：
myOffcanvas.show() - 关闭：
myOffcanvas.hide() - 监听关闭完成事件：
document.getElementById('myOffcanvas').addEventListener('hidden.bs.offcanvas', () => { /* 关闭后执行 */ })
不要重复初始化：如果已存在实例，再次 new bootstrap.Offcanvas(...) 会报错 "Cannot instantiate component twice"。稳妥做法是先检查是否已有 bootstrap.Offcanvas.getInstance。
移动端点击穿透、背景滚动、键盘焦点这些细节怎么处理？
Bootstrap 默认已处理大部分可访问性问题，但仍有几个容易被忽略的实际表现：
- 遮罩层（backdrop）默认启用，点击它会自动关闭 offcanvas；如需禁用，加
data-bs-backdrop="false" - 打开时 body 会被加
offcanvas-open类并设overflow: hidden，防止背景滚动——但如果页面本身有body { overflow: visible !important }，就会失效 - 首次打开时焦点会自动进到 offcanvas 内第一个可聚焦元素（如 close 按钮），但如果你删了 header 或没放可聚焦元素，焦点可能落在 body 上，影响键盘用户
- ESC 键默认可关闭，无需额外代码；但若禁用了 backdrop 又没提供关闭按钮，ESC 也无效
最常被忽略的是自定义样式覆盖了 .offcanvas-backdrop 的 z-index 或透明度，导致遮罩“看不见但点得着”，用户误以为没反应。
