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

Question

我正在与 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>

Answer 1

一些小改动以使其正常工作

您的代码需要一些小的修正才能正常工作。将 data-bs-parent="#myGroup" 属性添加到每个折叠。然后将相同的id分配给可折叠元素的父元素，即容器。

请注意，属性名称已从 Bootstrap 4 中的 data-parent 更改为 Bootstrap 5 中的 data-bs-parent。父元素是包含可折叠元素的元素并且 NOT 用于切换的按钮和链接的容器。

此外，按钮需要应用正确的类，例如 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>

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

Only show one collapse open (Vue 3 / Bootstrap 5)

javascript

vue.js

vuejs3

bootstrap-5

collapse