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

Question

我的网页中有一个底部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>

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