Bootstrap4 Accordion - 在不使用 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 All 功能。 我發現此實現無法按我的預期工作。 這只是將面板的 state 更改為與當前相反。

例如：

面板 1：隱藏

Panel2：隱藏

Panel3：隱藏

變成

Panel1：可見

Panel2：可見

Panel3：可見

這很好，但是例如說州是這樣的：

面板 1：隱藏

Panel2：可見

Panel3：隱藏

我希望 Collapse/Expand All 要么使它們全部隱藏或全部可見，但它實際上變成：

Panel1：可見

Panel2：隱藏

Panel3：可見

有沒有一種方法可以使用 Bootstrap4 來打開或關閉所有面板？

E：

因此，如果我所有要折疊的面板都有 class="multi-collapse"，我可以在切換按鈕中使用 data-target=".multi-collapse" 折疊它們。

當面板折疊時，其 class 為“多重折疊折疊”，當其可見時，class 為“多重折疊折疊顯示”。 如果我可以為數據目標指定多個類，我可以根據條件使目標多折疊折疊或多折疊折疊顯示...有什么方法可以為數據目標指定多個類嗎？

即使有一種方法可以折疊手風琴中的每個面板，也可以做到這一點。

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 項目，因此我能夠使用組件文件中的 boolean 變量跟蹤單個按鈕的 state。

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>

演示

為了使用單個按鈕執行此操作，您需要 JS 來跟蹤折疊面板的 state。