javascript - Bootstrap 可折叠目标多个元素

Question

我正在尝试使用 bootstrap collapsible 打开/关闭多个元素，但它只打开一个元素，这可以实现吗？

 <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

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

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