offcanvas 按钮问题也不起作用

Question

我使用了offcanvas上一个引导版本，它有关闭按钮（没有它，offcanvas无法关闭）：当我单击“添加到购物车”按钮时，offcanvas可以工作，但是。 “添加到购物车”按钮变得更亮，当我单击它时，我可以单击它（不应该工作，必须禁用它），它充当关闭按钮并且画布关闭！我该如何解决这个问题

html

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

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 将无法打开。