如何从offcanvas打开offcanvas

Question

我在打开之前 canvas 的 canvas 时遇到一点问题。通常我有这样的 canvas 使用 bootstrap 5:

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Toggle bottom offcanvas</button>

<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body small">
    <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#secondoffcanvas" aria-controls="offcanvasBottom" data-bs-dismiss="offcanvas">Open second offcanvas</button>
  </div>
</div>

秒关canvas:

<div class="offcanvas offcanvas-bottom" tabindex="-1" id="secondoffcanvas" aria-labelledby="offcanvasBottomLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body small">
    second content
  </div>
</div>

我的场景：

点击打开先关canvas
点击canvas中的按钮结果：

先canvas隐藏
秒canvas开

Answer 1

阅读“how it works”...

"Similar to modals, only one offcanvas can be shown at a time."

但是，您可以从另一个打开一个。当第一个隐藏时以编程方式显示第二个...

var offcanvasBottom = document.getElementById('offcanvasBottom')
var secondoffcanvas = document.getElementById('secondoffcanvas')

offcanvasBottom.addEventListener('hidden.bs.offcanvas', function () {
  var bsOffcanvas2 = new bootstrap.Offcanvas(secondoffcanvas)
  bsOffcanvas2.show()
})

Demo

Answer 2

谢谢你#Zim。这解决了我的问题。我有一个问题喷气机。您如何考虑确定事件是否由关闭按钮触发canvas 而不是从其他地方触发？因为现在如果您点击其他地方，第二个 canvas 也会打开

Answer 3

试试这个


function toggle() {
    document.getElementById('offcanvas').classList.toggle('show');
}

如何从offcanvas打开offcanvas

How to open offcanvas from offcanvas

html

javascript

jquery

bootstrap-5