bootstrap手风琴已全部折叠

问题描述：

我想做手风琴折叠/折叠，但是我没有设置它是一个相关的，标准的折叠/折叠很好，如果手风琴效果很麻烦，但是我希望它显示最初所有领域崩溃。bootstrap手风琴已全部折叠

请记住，我正在做一个循环来创建每一个，这可能是无关紧要的，因为我可以在第一个循环中添加一个不同的ID，类没有问题，但只是值得一提。

所以我有这样的：

<div class="row"> 
    <div class="panel-group" id="accordion"> 


     <div class="panel panel-default"> 
      <div class="panel-heading"> 
       <h5 class="panel-title"> 
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1"> 
         Title1 
        </a> 
       </h5> 
      </div> 
      <div id="collapse1" class="panel-collapse collapse in"> 
       <div class="panel-body"> 
        Content1 
       </div> 
      </div> 
     </div> 
     <div class="panel panel-default"> 
      <div class="panel-heading"> 
       <h5 class="panel-title"> 
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2"> 
         Title2 
        </a> 
       </h5> 
      </div> 
      <div id="collapse2" class="panel-collapse collapse in"> 
       <div class="panel-body"> 
        Content2 
       </div> 
      </div> 
     </div> 
     <div class="panel panel-default"> 
      <div class="panel-heading"> 
       <h5 class="panel-title"> 
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3"> 
         Title3 
        </a> 
       </h5> 
      </div> 
      <div id="collapse3" class="panel-collapse collapse in"> 
       <div class="panel-body"> 
        Content3 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

然后，我有以下脚本

<script> 
$(function() { 

var $active = true; 

$('.panel-title > a').click(function(e) { 
e.preventDefault(); 
}); 

$('.collapse-init').on('click', function() { 
    if(!$active) { 
     $active = true; 
     $('.panel-title > a').attr('data-toggle', 'collapse'); 
     $('.panel-collapse').collapse({'toggle': true, 'parent': '#accordion'}); 
     $(this).html('Click to disable accordion behavior'); 
    } else { 
     $active = false; 
     $('.panel-collapse.in').removeClass('in'); 
     $('.panel-collapse').collapse({'toggle': true, 'parent': '#accordion'}); 
     $('.panel-title > a').removeAttr('data-toggle'); 
     $(this).html('Click to enable accordion behavior'); 
    } 
}); 

     }); 
</script>

我已经与它周围的镀铬编辑搞砸从崩溃崩溃尝试和编辑类反之亦然，但没有任何东西似乎迫使它们全部崩溃。一个总是保持开放。

答

只需从<div id="collapse1" class="panel-collapse collapse in">

 <div class="panel panel-default"> 
      <div class="panel-heading"> 
       <h5 class="panel-title"> 
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1"> 
         Title1 
        </a> 
       </h5> 
      </div> 
      <div id="collapse1" class="panel-collapse collapse"> 
       <div class="panel-body"> 
        Content1 
       </div> 
      </div> 
     </div> 
     <div class="panel panel-default"> 
      <div class="panel-heading"> 
       <h5 class="panel-title"> 
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2"> 
         Title2 
        </a> 
       </h5> 
      </div> 
      <div id="collapse2" class="panel-collapse collapse"> 
       <div class="panel-body"> 
        Content2 
       </div> 
      </div> 
     </div> 
     <div class="panel panel-default"> 
      <div class="panel-heading"> 
       <h5 class="panel-title"> 
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3"> 
         Title3 
        </a> 
       </h5> 
      </div> 
      <div id="collapse3" class="panel-collapse collapse"> 
       <div class="panel-body"> 
        Content3 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

删除 in类

bootstrap手风琴已全部折叠

相关推荐