Bootstrap 5多层嵌套Offcanvas实现需求问询

要实现父级Offcanvas保持打开、子级在其上方弹出的效果，我们需要解决两个核心问题：阻止Bootstrap默认关闭其他Offcanvas的行为，以及调整子Offcanvas的尺寸让父级可见。下面是完整的实现方案：

完整代码示例 #

HTML结构 #

<!-- 触发按钮：打开第一个Offcanvas -->
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasParent" role="button" aria-controls="offcanvasParent">
  <i class="fas fa-bars"></i> 打开父级Offcanvas
</a>

<!-- 父级Offcanvas -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasParent" aria-labelledby="offcanvasParentLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasParentLabel">父级Offcanvas</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>这是父级Offcanvas的内容，点击下方按钮打开子级Offcanvas，我会保持打开状态哦！</p>
    <!-- 触发按钮：打开子级Offcanvas -->
    <a class="btn btn-primary mt-3" data-bs-toggle="offcanvas" href="#offcanvasChild" role="button" aria-controls="offcanvasChild">
      <i class="fas fa-bars"></i> 打开子级Offcanvas
    </a>
  </div>
</div>

<!-- 子级Offcanvas（更小尺寸） -->
<div class="offcanvas offcanvas-start offcanvas-sm" tabindex="-1" id="offcanvasChild" aria-labelledby="offcanvasChildLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasChildLabel">子级Offcanvas</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>我是子级Offcanvas，尺寸更小，你可以看到背后的父级内容~</p>
    <!-- 可以继续添加更深层级的Offcanvas触发按钮 -->
    <a class="btn btn-primary mt-3" data-bs-toggle="offcanvas" href="#offcanvasGrandchild" role="button" aria-controls="offcanvasGrandchild">
      <i class="fas fa-bars"></i> 打开孙级Offcanvas
    </a>
  </div>
</div>

<!-- 孙级Offcanvas（尺寸更小） -->
<div class="offcanvas offcanvas-start offcanvas-xs" tabindex="-1" id="offcanvasGrandchild" aria-labelledby="offcanvasGrandchildLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasGrandchildLabel">孙级Offcanvas</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>我是最内层的Offcanvas，多层叠加效果完美实现！</p>
  </div>
</div>

CSS样式（调整子级尺寸） #

/* 自定义小尺寸Offcanvas */
.offcanvas-sm {
  width: 300px; /* 比默认的400px小，露出父级 */
}

.offcanvas-xs {
  width: 220px; /* 更小号的尺寸 */
}

JavaScript（阻止默认关闭行为） #

// 监听所有Offcanvas的show事件，阻止关闭其他Offcanvas
document.addEventListener('show.bs.offcanvas', function (e) {
  // 遍历所有已打开的Offcanvas实例，阻止它们关闭
  document.querySelectorAll('.offcanvas.show').forEach(function(offcanvasEl) {
    var offcanvasInstance = bootstrap.Offcanvas.getInstance(offcanvasEl);
    if (offcanvasInstance) {
      offcanvasInstance._config.backdrop = false; // 临时关闭背景关闭功能
      // 取消默认的关闭其他Offcanvas的动作
      e.preventDefault();
      // 重新设置背景（可选，根据需求调整）
      setTimeout(() => {
        offcanvasInstance._config.backdrop = true;
      }, 100);
    }
  });
});

关键说明 #

1. 阻止默认关闭：Bootstrap 5的Offcanvas组件默认会在打开新实例时关闭所有已打开的Offcanvas，我们通过监听show.bs.offcanvas事件，阻止这个默认行为，同时保留每个Offcanvas独立的关闭按钮功能。
2. 尺寸调整：通过自定义CSS类给子级Offcanvas设置更小的宽度，这样父级Offcanvas的部分内容会显示在子级背后，实现嵌套叠加的视觉效果。
3. 层级扩展：这个方案支持无限层级的Offcanvas嵌套，只需要继续添加更小尺寸的Offcanvas和对应的触发按钮即可。

内容的提问来源于stack exchange，提问作者osman