jquery 我如何在顶部显示最后一个打开的画布?

ee7vknir  于 2023-03-22  发布在  jQuery
关注(0)|答案(1)|浏览(107)

问题是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>

我试着交换offcanvas1offcanvas2的html代码。它解决了我的问题。
但是当有很多offcanvas的时候,它也不起作用。我也不知道这是否是一个好的解决方案。
我该怎么解决呢?
先谢了!

ego6inou

ego6inou1#

我会把纽扣上的ID去掉。
变更:

  • 从打开按钮中删除ID
  • 创建了两个新的打开按钮以说明
    *单击按钮时关闭任何打开的按钮更改问题代码的键
  • 例如,为每个按钮data-target-canvas="#offcanvas2"添加了一个jQuery选择器。
  • 更新了代码,通过类工作,我添加到按钮offcanvas-open,而不是一个ID -如图所示,多个按钮一件事都工作。
  • 这一切可能会更简单,对元素进行一些小的更新,但不希望偏离原始标记太远。
    编辑:在X按钮(关闭)上增加了一个目标,指向“之前”
// now just use the data attribute no matter what its target is
$("[data-target-canvas]").on("click", function() {
  $('.offcanvas.offcanvas-start').offcanvas("hide");
  const targ = $(this).data("target-canvas");
  $(targ).first().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" data-target-canvas="#offcanvas1">Open Offcanvas 1</button>
<button class="btn btn-primary" type="button" data-target-canvas="#offcanvas2">Open Offcanvas 2</button>
<button class="btn btn-primary" type="button" data-target-canvas="#offcanvas3">Open Offcanvas 3</button>

<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvas1">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title">Offcanvas 1</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-target-canvas="#offcanvas3"></button>
  </div>
  <div class="offcanvas-body">
    <button class="btn btn-primary" type="button" data-target-canvas="#offcanvas3">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" data-target-canvas="#offcanvas2"></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" data-target-canvas="#offcanvas1"></button>
  </div>
  <div class="offcanvas-body">
    <button class="btn btn-primary" type="button" data-target-canvas="#offcanvas1">Open Offcanvas 3</button>
  </div>
</div>

第二个例子;放弃任何类选择器,所以我们需要做的就是添加数据属性到任何按钮等,它简单的“工作”。
一个二个一个一个
第三个例子;将容器类选择器作为目标,这样我们需要做的就是将data属性添加到任何容器中;然后把它挂接到按钮类,它就可以“工作”了。

/* Here we use the button class to determine the "next" target 
 *  If the button is "btn-close" then we go to the target of our "pointed to" element.
 *  If the button is NOT a "btn-close" then we simply use OUR target-canvas element.
 *  Since we need it more than once, we create a string canvasTarget to reuse.
 *  "event.delegateTarget" is what the event is hooked to (things with a data-target-canvas)
 *  "event.target" is whatever is clicked (the buttons) from our list; whatever is ON a "type" of button"; we had these so just used them: ".btn-close, .btn.btn-primary"
 */
$("[data-target-canvas]")
  .on("click", ".btn-close, .btn.btn-primary", function(event) {
    $('.offcanvas.offcanvas-start').offcanvas("hide");
    const canvasTarget = 'target-canvas';
    const base = $(event.delegateTarget).data(canvasTarget);
    const isClose = this.classList.contains('btn-close');
    //go get the value of our targets target
    const altTarg = $(base).data(canvasTarget);
    // when true we use the alt else we used the base from our delegate
    const nextTarg = isClose ? altTarg : base;
    $(nextTarg).first().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>

<span class="just-a-button" data-target-canvas="#offcanvas1">
<button class="btn btn-primary" type="button" >Open Offcanvas 1</button></span>

<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvas1" data-target-canvas="#offcanvas2">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title">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">Open Offcanvas 2</button>
  </div>
</div>

<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvas3" data-target-canvas="#offcanvas1">
  <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" data-target-canvas="#offcanvas3">
  <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">Open Offcanvas 3</button>
  </div>
</div>

相关问题