Bootstrap4 手风琴 - 在不使用 JavaScript 的情况下全部折叠

Question

这是 Bootstrap4 文档中的代码片段，位于：https://getbootstrap.com/docs/4.0/components/collapse/

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
</div>

我正在尝试在我的 Bootstrap 手风琴中实现类似的 Collapse/Expand 所有功能。我发现这个实现并不像我预期的那样工作。这只是将面板的状态更改为与当前相反的状态。

例如：

面板 1：隐藏

面板 2：隐藏

面板 3：隐藏

变成

面板 1：可见

面板 2：可见

面板 3：可见

这很好，但是例如说状态是这样的：

面板 1：隐藏

面板 2：可见

面板 3：隐藏

我希望 Collapse/Expand 全部隐藏或全部可见，但实际上变成了：

面板 1：可见

面板 2：隐藏

面板 3：可见

有没有一种方法可以使用 Bootstrap4 打开或关闭所有面板？

E:

因此，如果我要折叠的所有面板都具有 class="multi-collapse"，我可以在我的切换按钮中使用 data-target=".multi-collapse" 来折叠它们。

当面板折叠时，它的 class 是“multi-collapse collapse”，当它可见时，class 是“multi-collapse collapse show”。如果我可以为数据目标指定多个 classes，我可以使目标根据条件进行多次折叠折叠或多次折叠折叠显示...有什么方法可以指定多个 classes 用于数据目标？

即使有一种方法可以折叠手风琴中的每个面板也能达到目的。

E2:

感谢 Zim

<input type="button" class="btn btn-primary" data-toggle="collapse" [attr.data-target]="allExpanded ? '.multi-collapse:not(.show)': '.multi-collapse.show'" (click)="allExpanded = !allExpanded" [attr.value]="allExpanded ? 'Collapse All': 'Expand All'" >

这是一个 Angular 项目，因此我能够使用组件文件中的布尔变量跟踪单个按钮的状态。

Answer 1

不使用 JavaScript 的唯一方法 是使用 2 个单独的按钮。 data-target 将仅针对打开的 .multi-collapse.show 或关闭的 .multi-collapse:not(.show) 面板..

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse:not(.show)">Show all</button> <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse.show">Hide all</button>

Demo

为了使用单个按钮执行此操作，您需要 JS 来跟踪折叠面板的状态。

Bootstrap4 手风琴 - 在不使用 JavaScript 的情况下全部折叠

Bootstrap4 Accordion - Collapse All without use of JavaScript

html

bootstrap-4

accordion