无法折叠多个项目答案

【问题标题】：Unable to Collapse Multiple Items无法折叠多个项目
【发布时间】：2019-08-27 23:59:19
【问题描述】：

我正在学习如何使用引导程序制作展开/折叠按钮。我有两个可以在单击时展开/折叠的项目，并且我还有一个用于所有项目的主展开/折叠。问题是当一个项目被扩展，而另一个不是。主展开/折叠按钮将关闭第一个但打开第二个。无论项目是否展开，如何使主按钮展开/折叠？

<div class="container">
<button type="button" class="btn btn-primary">Expand/Collapse</button>

  <div class="card">  
    <div class="card-body">
      <button class="card-title" data-toggle="collapse" data-target="#collapse" aria-expanded="false" aria-controls="collapse">Test</button>

      <div class="card-text" id="collapse">
      test
      </div>


      <button class="card-title" data-toggle="collapse" data-target="#collapse1" aria-expanded="false" aria-controls="collapse">
        <strong>Test2</strong>
      </button>

      <div class="card-text" id="collapse1">
     Beta2
      </div> 

    </div>
  </div>

下面是主按钮的代码：

$(".btn-primary").click(function(){
    $(".card-text").collapse('toggle');
});

【问题讨论】：

标签： html bootstrap-4 toggle collapse

【解决方案1】：

这是answered for Bootstrap 3.x here，概念还是一样，各个折叠元素都有自己的展开/折叠状态，按钮现在所做的就是切换每个按钮的状态。

全部展开/折叠按钮必须跟踪“展开”或“折叠”的当前状态全部。

$(".btn-primary").click(function(){

    if ($(this).data("closedAll")) {
        $(".collapse").collapse("show");
    }
    else {
        $(".collapse").collapse("hide");
    }

    // toggle state and remember it
    $(this).data("closedAll",!$(this).data("closedAll")); 
});

// init with all closed
$(".btn-primary").data("closedAll",true);

演示：https://codeply.com/go/i5h1tBmTaa

【讨论】：

【解决方案2】：

我没有 100% 理解你的问题，但是我在 jsfiddle 上写了一个 sn-p 以按照我的理解进行相应的工作。

最好的方法是使用条件语句来检查这些组件是否折叠。基于此，我们可以使用bootstrap docs中提到的折叠方法

<div class="container mt-5">
  <button id="main-button" type="button" class="btn btn-primary mb5">Expand/Collapse</button>

  <div class="card">  
    <div class="card-body">

    <button type="button" class="btn btn-info d-block m-2" data-toggle="collapse" data-target="#demo1">Demo 01</button>
    <div id="demo1" class="collapse">
      Lorem ipsum dolor sit amet
    </div>


    <button type="button" class="btn btn-info d-block m-2" data-toggle="collapse" data-target="#demo2">Demo 02</button>
    <div id="demo2" class="collapse">
      Lorem ipsum dolor sit amet
    </div>

  </div> 
</div>

这是 jQuery 部分

$('.collapse').collapse();


$('#main-button').on('click',function(){
  let demo1 = $('#demo1');
  let demo2 = $('#demo2');

  if(demo1.hasClass('show') && demo2.hasClass('show')){
    demo1.collapse('hide');
    demo2.collapse('hide');
  }

  if((demo1.hasClass('show') === false) && (demo2.hasClass('show') === false) ){
    demo1.collapse('show');
    demo2.collapse('show');
  }

  if((demo1.hasClass('show') === false) && (demo2.hasClass('show') === true) ){
    demo2.collapse('hide');
  }

  if((demo1.hasClass('show') === true) && (demo2.hasClass('show') === false) ){
    demo1.collapse('hide');
  }


});

我用js fiddle写的，点击HERE查看。

【讨论】：