Bootstrap 3沒有標識或數據的可摺疊面板

我需要處理面板摺疊行爲而不使用標識或數據屬性。理想的情況是通過設置在父DIV一種「可摺疊」類，可以摺疊的內容，並在標題點擊應該觸發崩潰Bootstrap 3沒有標識或數據的可摺疊面板

這裏的目標HTML我想寫處理自動崩潰行爲

<div class="panel-group collapse-all-but-one"> 
    <div class="panel panel-primary panel-collapsible> 
     <div class="panel-heading">Click me to collapse</div> 
     <div class="panel-body">I will collaaaaaaapse</div> 
    </div> 
    <div class="panel panel-warning panel-collapsible"> 
     <div class="panel-heading">Hey another one</div> 
     <div class="panel-body">I will close when the other one opens</div> 
    </div> 
</div>

來源

2014-08-27 Cyril Duchon-Doris

這裏是我的魔一段代碼（準備的東西可確保與導軌/ angularJS兼容性）

var ready 
ready = function(){ 
    $(".panel-collapsable") 
    .children(".panel-heading") 
     .click(function(){ 
      var group = $(this).parent().parent() 
      if (group.hasClass("panel-group one-at-a-time")){ 
       group.children(".panel").children(".panel-body") 
        .collapse('hide') 
      } 
      $(this) 
       .next('.panel-body') 
       .collapse('toggle') 
     }) 
} 
$(document).ready(ready); 
$(document).on('page:load', ready);

記住添加一些自舉類像.collapse。在或.collapsed初始化正確的行爲或第一次點擊不會做任何事。

<div class="panel-body collapse in">I am expanded on page load</div> 
... 
<div class="panel-body collapse">I am collapsed on page load</div>

來源

2014-08-27 10:45:31

Bootstrap 3沒有標識或數據的可摺疊面板

回答

相關問題