如何在 Bootstrap 5 中以编程方式打开 offcanvas？答案

【问题标题】：How to open offcanvas programmatically in Bootstrap 5?如何在 Bootstrap 5 中以编程方式打开 offcanvas？
【发布时间】：2021-03-26 20:46:23
【问题描述】：

我的网页中有一个底部的 offcanvas，我会通过单击卡片、尝试设置所需的属性或使用文档中的代码来打开它，因为 offcanvas 仅显示背景并立即将其关闭.

这是我尝试过的：

const products = document.getElementsByClassName("card product");

var productClick = function (event) {
    event.preventDefault()
    var myOffcanvas = document.getElementById('offcanvasBottom')
    var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
    bsOffcanvas.show();
};

Array.from(products).forEach(function (element) {
  element.addEventListener("click", productClick);
});

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>


<div class="card product" style="width: 18rem">
  <div class="card-body text-center">
    <h2 class="card-title fw-bolder">TEST</h2>
    <p class="card-text fw-bolder">TEST</p>
  </div>
</div>

      <div
        class="offcanvas offcanvas-bottom"
        tabindex="-1"
        id="offcanvasBottom"
      >
        <div class="offcanvas-header">
          <button
            type="button"
            class="btn-close text-reset"
            data-bs-dismiss="offcanvas"
            aria-label="Close"
          ></button>
        </div>
        <div class="offcanvas-body">
         BODY
        </div>
      </div>

【问题讨论】：

你能提供一个最小的可重现的例子吗？
@ManasKhandelwal 刚刚添加了 sn-p
你为什么使用javascript？什么时候可以用 HTML 做到这一点？
@ManasKhandelwal - 它应该与 JavaScript 一起使用，可能有很多原因不想在 HTML 中使用它，例如许多动态添加的卡片。

标签： javascript bootstrap-5

【解决方案1】：

问题是卡片点击事件正在传播到内部元素。而是使用event.stopPropagation()...

const products = document.getElementsByClassName("product");
var myOffcanvas = document.getElementById('offcanvasBottom')
    
var productClick = function (event) {
    //event.preventDefault()
    event.stopPropagation()
    var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
    bsOffcanvas.show()
}

Array.from(products).forEach(function (element) {
    element.addEventListener("click", productClick);
})

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>


<div class="card product" style="width: 18rem">
  <div class="card-body text-center">
    <h2 class="card-title fw-bolder">TEST</h2>
    <p class="card-text fw-bolder">TEST</p>
  </div>
</div>

      <div
        class="offcanvas offcanvas-bottom"
        tabindex="-1"
        id="offcanvasBottom"
      >
        <div class="offcanvas-header">
          <button
            type="button"
            class="btn-close text-reset"
            data-bs-dismiss="offcanvas"
            aria-label="Close"
          ></button>
        </div>
        <div class="offcanvas-body">
         BODY
        </div>
      </div>

【讨论】：