问题是offcanvas3
打开在offcanvas2
后面。
像这样
$("#open-offcanvas2").on("click", function(){
$("#offcanvas2").offcanvas("show")
})
$("#open-offcanvas1").on("click", function(){
$("#offcanvas1").offcanvas("show")
})
$("#open-offcanvas3").on("click", function(){
$("#offcanvas3").offcanvas("show")
})
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<button class="btn btn-primary" type="button" id="open-offcanvas1">Open Offcanvas 1</button>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvas1">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Offcanvas 1</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<button class="btn btn-primary" type="button" id="open-offcanvas2">Open Offcanvas 2</button>
</div>
</div>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvas3">
<div class="offcanvas-header">
<h5 class="offcanvas-title">Offcanvas 3</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
</div>
</div>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvas2">
<div class="offcanvas-header">
<h5 class="offcanvas-title">Offcanvas 2</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
<button class="btn btn-primary" type="button" id="open-offcanvas3">Open Offcanvas 3</button>
</div>
</div>
我试着交换offcanvas1
和offcanvas2
的html代码。它解决了我的问题。
但是当有很多offcanvas的时候,它也不起作用。我也不知道这是否是一个好的解决方案。
我该怎么解决呢?
先谢了!
1条答案
按热度按时间ego6inou1#
我会把纽扣上的ID去掉。
变更:
*单击按钮时关闭任何打开的按钮更改问题代码的键
data-target-canvas="#offcanvas2"
添加了一个jQuery选择器。offcanvas-open
,而不是一个ID -如图所示,多个按钮一件事都工作。编辑:在X按钮(关闭)上增加了一个目标,指向“之前”
第二个例子;放弃任何类选择器,所以我们需要做的就是添加数据属性到任何按钮等,它简单的“工作”。
一个二个一个一个
第三个例子;将容器类选择器作为目标,这样我们需要做的就是将data属性添加到任何容器中;然后把它挂接到按钮类,它就可以“工作”了。