2012-04-13 104 views
21

我使用的引導 提供崩潰插件,它是一個jQuery簡單的插件jQuery的手風琴默認情況下不

但是默認情況下它崩潰,如何修改,使塌陷項默認是隱藏的,倒塌只有當我按下標題,然後項目摺疊並顯示?謝謝

The document of the plugin, just few line so it only takes one minute

$(document).ready(function() { 
$(".collapse").collapse()({ 
    toggle: false, 
    show: false 
    }); 
}); 

這是HTML:

<div class="accordion-group"> 
      <div class="alert alert-info" data-toggle="collapse" href="#collapse1" style="margin-bottom:0px;">      
       Collapsible #1 
        </div> 
      <div id="collapse1" class="accordion-body collapse" style="background-color:#ffffff;"> 
       content1 
      </div> 
          <div class="alert alert-info" data-toggle="collapse" href="#collapse2" style="margin-bottom:0px;">      
       Collapsible #2 
        </div> 
      <div id="collapse2" class="accordion-body collapse" style="background-color:#ffffff;"> 
       content2 
      </div> 

+0

可能的重複[如何讓我的手風琴加載所有菜單關閉?](http://stackoverflow.com/questions/9419470/how-do-i-get-my-accordion-to-load-with -all-the-menu-closed) – davidcondrey 2014-06-24 08:32:29

回答

56

自舉3,一些事情發生了變化。下面的代碼實現自舉3

您所需的功能,如果你想要的面板主體爲默認顯示:

<div id="collapseOne" class="panel-collapse collapse in"> 

如果你想在面板主體默認隱藏:

<div id="collapseOne" class="panel-collapse collapse"> 

這裏是一個例子:

<div class="bs-example"> 
    <div class="panel-group" id="accordion"> 

      <!- Repeat For Next Panel-------> 
     <div class="panel panel-default"> 
      <div class="panel-heading"> 
       <h4 class="panel-title"> 
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 
         xxxxxxxxxxxHERE IS THE HEADER CONTENTSxxxxxxxxxxxx 
        </a> 
       </h4> 
      </div> 
       <div id="collapseOne" class="panel-collapse collapse in"> 
        <div class="panel-body"> 
         xxxxxxxxxxxHERE IS THE BODY CONTENTSxxxxxxxxxxxx 
        </div> 
       </div> 
     </div> 
      <!- Repeat For Next Panel---(but change <div id="collapseTwo")---> 

    </div> 
</div> 
+0

並改變爲href =「#collapseTwo」> – Huntario 2013-10-08 18:51:22

+0

我越來越沮喪,直到你的帖子明確表示「in」並不意味着「不可見」。 – Lucas 2014-05-03 17:25:34

+0

您是否必須擁有class =「panel panel-default」?我發現如果我從div中刪除它,它會停止自動關閉。但我不想要它的風格。 – 2015-04-28 13:34:57

1
<div class="accordion-group collapse"> 
    <div class="alert alert-info" data-toggle="collapse" href="#collapse1" style="margin-bottom:0px;">      
      Collapsible #1 
    </div> 
    <div id="collapse1" class="accordion-body collapse" style="background-color:#ffffff;"> 
      content1 
    </div> 
    <div class="alert alert-info" data-toggle="collapse" href="#collapse2" style="margin-bottom:0px;">      
      Collapsible #2 
    </div> 
    <div id="collapse2" class="accordion-body collapse" style="background-color:#ffffff;"> 
      content2 
    </div> 
</div>