bootstrap Offcanvas使用方法以及JS调用Offcanvas

Offcanvas是一个边栏组件，可以通过JavaScript进行切换，从视口的左、右或下边缘显示。按钮或锚定被用作附加到您切换的特定元素的触发器，数据属性被用于调用我们的JavaScript。

演示案例

<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
  Button with data-bs-target
</button>

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
    </div>
    <div class="dropdown mt-3">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
        Dropdown button
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
      </ul>
    </div>
  </div>
</div>

JS控制Offcanvas

1、Js控制

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
# 显示Offcanvas
bsOffcanvas.show();

• toggle 将offcanvas元素切换为显示或隐藏。在offcanvas元素实际显示或隐藏之前（即在Showed.bs.offcanvas或hidden.bs.offcanvas事件发生之前）返回调用方。
• show 显示Offcanvas
• hide 隐藏Offcanvas
• getInstance 静态方法，该方法允许您获取与DOM元素关联的offcanvas实例
• getOrCreateInstance 静态方法，该方法允许您获取与DOM元素关联的offcanvas实例，或者在未初始化的情况下创建一个新实例

2、JS监听Offcanvas状态

• show.bs.offcanvas 调用show instance方法时，此事件立即激发。
• shown.bs.offcanvas 当用户看到offcanvas元素时（将等待CSS转换完成），将触发此事件。
• hide.bs.offcanvas 调用hide方法后，将立即触发此事件。
• hidden.bs.offcanvas 当对用户隐藏offcanvas元素时（将等待CSS转换完成），将触发此事件。

var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})

参考文档Offcanvas