Question

我试图使用bootstrap可折叠打开/关闭多个元素，但它只打开一个元素，这是可以实现的吗？

 <button data-toggle="collapse" data-target=".elements">Collapsible</button>

<div class="elements collapse">
Lorem1 ipsum dolor text....
</div> 

<div class="elements collapse">
Lorem2 ipsum dolor text....
</div>

Answer 1

您可以在此处查看示例

<p>
   <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
</div>

Answer 2

是的，你可以，但是如果你处理数据库从while loop生成了元素，那么这将成为你的障碍，一个好的方法是使用jquery的toggleClass方法。

$( ".elements" ).toggleClass( show, hide );

$('#btn').on('click', function(){

$(".elements").toggleClass('hide');

})

.hide{
display:none;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
  
  
 <button class="btn btn-default" id="btn">Toggle</button> 
 
 <div class="elements hide">1</div>
  <div class="elements hide">2</div>
   <div class="elements hide">3</div>
    <div class="elements hide">4</div>
     <div class="elements hide">5</div>
      <div class="elements hide">6</div>
      
      
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Bootstrap可折叠目标多个元素

2 个答案: