2015-10-15 257 views
0

我想做手風琴摺疊/摺疊,但是我沒有設置它是一個相關的,標準的摺疊/摺疊很好,如果手風琴效果很麻煩,但是我希望它顯示最初所有領域崩潰。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> 

我已經與它周圍的鍍鉻編輯搞砸從崩潰崩潰嘗試和編輯類反之亦然,但沒有任何東西似乎迫使它們全部崩潰。一個總是保持開放。

回答

2

只需從<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
相關問題