Bootstrap 4手风琴“全部展开/折叠”

Question

我正在尝试通过单击按钮来切换所有手风琴项目的状态。默认情况下，我希望它们都关闭。按钮应该是“全部展开”或“全部关闭”。根据 文档，我应该能够使用 toggle() 方法？以下是我的当前代码及其 fiddle 链接。 HTML：

<button id="toggleAccordions" class="btn btn-primary" type="button" data-toggle="collapse">Open / Close</button>

<div id="accordion" role="tablist">
  <div class="card">
    <div class="card-header" role="tab" id="headingOne">
      <h5 class="mb-0">
        <a data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h5>
    </div>

    <div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
        raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" role="tab" id="headingTwo">
      <h5 class="mb-0">
        <a class="collapsed" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
        raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" role="tab" id="headingThree">
      <h5 class="mb-0">
        <a class="collapsed" data-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
        raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

JQuery

$(function() {
  $('#toggleAccordions').on('click', function(e) {
    $('#accordion .collapse').collapse('toggle')
  })
});

任何帮助都是受欢迎的。

Fiddle。

- TheOrdinaryGeek

---

使用 hide 替代 toggle: https://jsfiddle.net/org5cyr9/5/ - Rory McCrossan

每次只能打开一个手风琴。 - Pianistprogrammer

@TheOrdinaryGeek，对我来说这似乎没问题，但也许我误解了你试图做什么。 - Rory McCrossan

你可以切换 show 类，但是你不会得到过渡效果 https://jsfiddle.net/aeoe03me/1/ - Nenad Vracar

@TheOrdinaryGeek 我有点困惑，因为你的原始代码已经实现了这个功能。请注意，正如Jerry所提到的，如果这是问题，你一次只能打开一个手风琴。 - Rory McCrossan

Answer 1

这并不是你代码的确切答案，而是我在Bootstrap 4上使用手风琴解决问题的一般想法。

手风琴被构建成一次只能显示一个面板，所以诀窍是通过首先在显示时删除data-parent属性，然后在隐藏时重新添加它来覆盖此行为。

在这种情况下，我有两个按钮。一个用于显示，一个用于隐藏。

 $(function() {
    $('#toggleAccordions-show').on('click', function(e) {
        $('#accordion .collapse').removeAttr("data-parent");
        $('#accordion .collapse').collapse('show');
    })
    $('#toggleAccordions-hide').on('click', function(e) {
        $('#accordion .collapse').attr("data-parent","#accordion");
        $('#accordion .collapse').collapse('hide');
    })
});

- Turbojohan

---

在Bootstrap 4上完美运行！谢谢。 - Imtiaz

Answer 2

您可以尝试以下代码：

  $(function() {
  $('#toggleAccordions').on('click', function(e) {
    $('#accordion .collapse').toggleClass('show');
  })
});

- Md. Shahidul Islam

---

如果您在手风琴中有一个单个切换按钮（例如“显示/隐藏全部”）来控制多个折叠，则以下是正确的简短答案。 - sanpat

Answer 3

在Turbojohan的回答基础上，可以将代码写得更短，这样就不会有重复的jQuery选择器了。

$(function() {
    $('#toggleAccordionShow').on('click', function(e) {
        $('#accordion .collapse').removeAttr("data-parent").collapse('show');
    });
    $('#toggleAccordionHide').on('click', function(e) {
        $('#accordion .collapse').attr("data-parent","#accordion").collapse('hide');
    });
});

- andries

Answer 4

Turbojohan和user315400的答案可以改进，只需使用一个按钮来显示和隐藏卡片：

$("#toggleAccordion").click(function(){
  if ($(this).data("closedAll")) {
    $('#accordion .collapse').removeAttr("data-parent").collapse('show');
  }
  else {
    $('#accordion .collapse').attr("data-parent","#accordion").collapse('hide');
  }

  // save last state
  $(this).data("closedAll", !$(this).data("closedAll")); 
});

// init with all closed
$("#toggleAccordion").data("closedAll", true);

- Markus