我的网页中有一个 bottom 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>
最佳答案
问题是卡片点击事件传播到内部元素。而是使用 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>
关于javascript - 如何在 Bootstrap 5 中以编程方式打开 offcanvas?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66816000/