Offcanvas 按钮有错误行为

Question

我正在使用 Offcanvas 的最新 Bootstrap 版本。它有一个关闭按钮（没有它，offcanvas 无法关闭）。当我单击按钮

Add to cart

时，关闭画布可以工作，但是按钮

Add to cart

变得更亮，我可以单击它（这不应该工作，必须将其禁用）。当我单击它时，它充当关闭按钮并且画布关闭！我该如何解决这个问题？

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

<div class="product-button-group">
  <a class="product-like-icon" href="#">
    <i class="fas fa-heart"></i>
  </a>
  <button class="add-to-cart" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
      <i class="fa fa-shopping-bag"></i>ADD TO CART
    </button>

  <div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">

    <div class="offcanvas-header">
      <h3 class="offcanvas-title">
        <i class="fa-solid fa-bag-shopping"></i> Shopping Cart
      </h3>
      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>

    <div class="offcanvas-body">
      <div class="col-sm-12">
        <div class="row">
          <div class="col-sm-3">
            <img src="" alt="mutlu cat shop" width="100px" />
          </div>
          <div class="col-sm-9">
            <h6>Zanies® Twice as Nice Mice</h6>
            <div class="price"><span>$30.00</span> $20.00</div>
            <input class="product-qty" type="number" name="product-qty" min="0" max="10" value="1">
          </div>
        </div>
      </div>
      <hr class="hr-cart">
      <a class="complete-shopping position-absolute bottom-0 end-0" href="#">   Complete shopping</a>
    </div>

  </div>
  <a class="product-compare-icon" href="#"><i class="fas fa-random"></i></a>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

Answer 1

尝试在页面顶部或底部添加脚本标签：

<script>
document.querySelector('.add-to-cart').addEventListener('click', function(event) {
    event.preventDefault(); // Prevent default link action
    // Optionally add your logic here
});
</script>

document.querySelector('.add-to-cart')

就是通过他的ID来抓住按钮

在脚本部分，为“添加到购物车”按钮上的单击事件添加了一个监听器，驱动单击链接操作的函数接收该事件。此添加可防止链接的自动响应，因此 offcanvas 将无法打开。