javascript 仅显示一个折叠打开(Vue 3 / Bootstrap 5)

rqqzpn5f 于 2022-11-27 发布在 Java

关注(0)|答案(1)|浏览(196)

我正在处理Bootstrap5和Vue 3。我有多个buttons，每个都触发一个collapse。
我想要的是，如果我打开一个坍缩，所有其他的坍缩都应该关闭。但是现在每个坍缩都将显示出来，而其他的坍缩没有关闭。
我试过使用data-parent和data-bs-parent，但都不起作用。
我怎么能做到呢？谢谢你!

<div class="row margin-top">
  <div class="col">
    <div class="d-grid gap-2">
      <button type="button" class="btn color-success" style="height: 200px;" data-bs-toggle="collapse" data-bs-target="#collapse-b1" aria-expanded="false" aria-controls="collapse-b1" data-bs-parent="#myGroup">
        Button 1
      </button>
    </div>
  </div>

  <div class="col">
    <div class="d-grid gap-2">
      <button type="button" class="btn color-primary" style="height: 200px;" data-bs-toggle="collapse" data-bs-target="#collapse-b2" aria-expanded="false" aria-controls="collapse-b2" data-bs-parent="#myGroup">
        Button 2
      </button>
    </div>
  </div>
</div>

<div>
  <div class="collapse" id="collapse-b1">
    <div class="mt-3">
      Text 1
    </div>
  </div>

  <div class="collapse" id="collapse-b2">
    <div class="mt-3">
      Text 2
    </div>
  </div>
</div>

JavaScript

来源：https://stackoverflow.com/questions/72345809/only-show-one-collapse-open-vue-3-bootstrap-5

1条答案

按热度按时间

ryhaxcpt1#

做了一些小改动

您的代码需要进行一些小的修正才能正常工作。为每个折叠添加data-bs-parent="#myGroup"属性。然后为 * 可折叠元素 * 的父元素（即容器）分配相同的id。
请注意，属性名称已从Bootstrap 4中的data-parent更改为Bootstrap 5中的data-bs-parent。父元素是包含可折叠元素的元素，而不是用于切换的按钮和链接的容器。
此外，按钮需要应用正确的类，例如btn-primary和btn-success。
相关SO问题：Collapse other sections when one is expanded

执行程式码片段以查看其运作方式：

<div class="row margin-top">
  <div class="col">
    <div class="d-grid gap-2">
      <button type="button" class="btn btn-success" style="height: auto;" data-bs-toggle="collapse" data-bs-target="#collapse-b1" aria-expanded="false" aria-controls="collapse-b1">
        Button 1
      </button>
    </div>
  </div>

  <div class="col">
    <div class="d-grid gap-2">
      <button type="button" class="btn btn-primary" style="height: auto;" data-bs-toggle="collapse" data-bs-target="#collapse-b2" aria-expanded="false" aria-controls="collapse-b2">
        Button 2
      </button>
    </div>
  </div>

</div>

<div id="myGroup">  <!-- Add the parent id here -->

  <div class="collapse" id="collapse-b1"  data-bs-parent="#myGroup">
    <div class="alert alert-success mt-3">
      Text 1
    </div>
  </div>

  <div class="collapse" id="collapse-b2" data-bs-parent="#myGroup">
    <div class="alert alert-primary mt-3">
      Text 2
    </div>
  </div>
  
</div>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script>

赞(0）回复(0）举报 2022-11-27

我来回答

javascript 仅显示一个折叠打开(Vue 3 / Bootstrap 5)

1条答案

相关问题

热门标签

最新问答