无法折叠多个项目

Question

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

<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');
});

Answer 1

这是answered for Bootstrap 3.x here，概念仍然相同，各个崩溃元素都有自己的展开/折叠状态，所有按钮现在正在切换每个按钮的状态。

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

$(".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);

但是：ぁzxswい

Answer 2

我并没有100％理解你的问题，但是我在jsfiddle上写了一个片段，据我理解的那样工作。

最好的方法是使用条件语句来检查这些组件是否已折叠。基于此，我们可以使用https://www.codeply.com/go/i5h1tBmTaa中提到的折叠方法

bootstrap docs

这是jQuery的一部分

<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>

我用js小提琴写了它，点击

$('.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');
  }


});

看看。