Question

我正在学习如何使用引导程序来创建“展开/折叠”按钮。我有两个可以在单击时展开/折叠的项目，并且我还有一个用于所有项目的主要展开/折叠的项目。问题是何时展开一项，而另一项则没有。主“展开/折叠”按钮将关闭第一个按钮，但打开第二个按钮。无论项目是否已展开，如何使主按钮展开/折叠？

<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，概念仍然相同，各个折叠元素都有自己的Expand / Collapse状态，并且所有按钮现在正在执行的操作是切换每个按钮的状态。

全部展开/折叠按钮必须跟踪“展开”或“折叠”的当前状态 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);

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

Answer 2

我不是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小提琴编写了它，单击HERE来查看它。

无法折叠多个项目

2 个答案: