如何從 offcanvas 打開 offcanvas

Question

我從以前的 canvas 打開一個畫布有點問題。 通常我有 canvas 像這樣使用引導程序 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>

第二個畫布：

<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>

我的場景：

1. 點擊打開第一個畫布
2. 點擊 canvas 結果中的按鈕：

• 第一個 canvas 隱藏
• 第二個canvas開

Answer 1

閱讀“ 它是如何工作的”...

“類似於模態，一次只能顯示一個畫布。”

但是，您可以從另一個打開一個。 當第一個被隱藏時以編程方式顯示第二個......

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

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

演示

Answer 2

嘗試這個

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

Answer 3

謝謝你#Zim。 這解決了我的問題。 我有一架提問機。 您如何看待確定事件是否從畫布上的按鈕觸發而沒有從其他地方觸發？ 因為現在如果你點擊其他地方第二個 canvas 也是打開的