offcanvas 按钮问题也不起作用

问题描述 投票:0回答:1

我使用了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>


html css twitter-bootstrap button bootstrap-5
1个回答
0
投票

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

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

© www.soinside.com 2019 - 2024. All rights reserved.