如何让手风琴在closures所有菜单的情况下加载?

我试图在这里按照这个例子

http://twitter.github.com/bootstrap/javascript.html#collapse

我在这里放置了一个模型

http://jsfiddle.net/gqe7g/

加载行为很奇怪。 它显示Menu1然后折叠它,然后显示Menu2和Menu3。 我希望一切都打开崩溃。 我尝试了以下没有成功

$('#accordion').collapse({hide: true}) 

更换

 $(".collapse").collapse(); $('#accordion').collapse({hide: true}) 

有:

 $('#collapseOne').collapse("hide"); 

应该做的伎俩。 我认为第一个默认是打开的,这一行将它closures。

从文档:

如果您希望默认打开,请添加其他课程。

换句话说,省略“in”,它将默认closures。 http://jsfiddle.net/JBRh7/

如果要closures页面加载时的所有折叠:

在课堂collapse inreplace为课堂collapse

 id="collapseOne" class="panel-collapse collapse **in**" role="tabpanel" aria-labelledby="headingOne"> 

更新至:

 id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> 

如果您最初需要手风琴 折叠,您可以使用预先存在的引导程序定义来实现,但不必使用javascript。

添加类collapsed到锚或句柄,这将是用户点击目标,以切换打开/closures他们。 此外,从折叠容器中删除in课堂上。

Bootstrap还提供了一些可选的规范,可以通过添加data-parent=""data-toggle=""来传递

  • data-parent接受一个select器,并指定所有可折叠元素是数据父级的兄弟元素将一致切换。
  • data-toggle接受布尔值truefalse并在可折叠元素上设置调用。

示例场景:

负载是否会折叠

 <div class="accordion" id="accordion2"> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> Title </a> </div> <div id="collapseOne" class="accordion-body collapse"> <div class="accordion-inner"> Details 

将加载扩展

 <div class="accordion" id="accordion2"> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> Title </a> </div> <div id="collapseOne" class="accordion-body"> <div class="accordion-inner"> Details 

将加载扩展

 <div class="accordion" id="accordion2"> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> Title </a> </div> <div id="collapseOne" class="accordion-body collapse in"> <div class="accordion-inner"> Details 

在第三个例子中,无论collapsed类是否被指定,手风琴将默认展开,因为容器in类将获得更多的权重。


如果你想通过Javascript触发手风琴,你只需要调用方法collapse()以及适当的id或类select器来定位可折叠的元素。

collapse()也接受与可以添加到标记相同的选项。 data-parentdata-toggle

你错过了菜单2和菜单3手风琴身体div的类

你手风琴的每一个div都需要class="accordion-body collapse in" 。 现在,他们中的一些人只是有了class="accordion-body collapse"

http://jsfiddle.net/fcJJT/

更改

 class="accordion-body collapse in" 

 class="accordion-body collapse" 

在你的collapseOne DIV上

您可以将选项toggle: false传递给collapse语句以使手风琴的所有元素都隐藏在载入中,如下所示:

 $('.collapse').collapse({ toggle: false }); 

演示: http : //jsfiddle.net/gqe7g/9/

这是我用于我的手风琴。 它开始完全closures。 你要

  active: false;//this does the trick 

充分:

 <div id="accordian_div"> <h1>first</h1> <div> put something here </div> <h1>second</h1> <div> put something here </div> <h1>third</h1> <div> put something here </div> </div> <script type="text/javascript"> $(document).ready(function() { $("#accordian_div").accordion({ collapsible: true, active: false, clearStyle: true }); }); </script> 

不熟悉瓶装,但是这看起来比所有需要处理和运行的类都要清洁。

使用Bootstrap提供的隐藏方法,

 $('.collapse').collapse('hide') 

演示http://thefanciful.com 。 我的信息在加载时隐藏,并在按下button时激活。 🙂

只需从“collapseOne”中的.panel-collapse中移除.in.panel-collapse 。 (Bootstrap v3.3.7)

使用jQuery ,这对我有所有的容器折叠在页面加载

添加{active: false} ,当然必须启用collapsible

  $(function () { $("#accordion").accordion({ collapsible: true, active: false }); $(".selector").accordion(); }); 
 <script type="text/javascript"> jQuery(document).ready(function ($) { $('#collapseOne').collapse("hide"); }); </script> 

我知道这是一个古老的讨论,但这里有两个更有效的解决scheme:

1)添加

这个链接里面有一个aria-expanded="true"的类:

 <a data-toggle="collapse" data-parent="#accordion"...></a> 

2)如果你使用面板(如下图)

 <div id="collapse1" class="panel-collapse out collapse in" style="height: auto;"> 

collapse in collapse out也将伎俩