无法折叠多个项目

Question

我正在学习如何使用 bootstrap 制作 Expand/Collapse 按钮。我有两个项目可以 Expand/Collapse 单击时，我还有一个主要的 Expand/Collapse 用于所有项目。问题是当一个项目展开时，另一个没有展开。 Expand/Collapse 主按钮将关闭第一个但打开第二个。如何让主按钮 Expand/Collapse 是否展开项目？

<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

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

最好的方法是使用条件语句来检查这些组件是否折叠。基于此，我们可以使用 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可以看到

Answer 2

这是，概念仍然相同，各个折叠元素都有自己的 Expand/Collapse 状态，按钮现在所做的就是切换每个按钮的状态.

expand/collapse all 按钮必须跟踪 "Expand" 或 "Collapse" ALL[=22= 的当前状态].

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

无法折叠多个项目

Unable to Collapse Multiple Items

html

toggle

collapse

bootstrap-4