如何让我的手风琴载入所有菜单关闭?

I'm trying to follow the example here

我试着遵循这个例子

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

http://twitter.github.com/bootstrap/javascript.html崩溃

I have placed a mockup here

我在这里放了一个模型

http://jsfiddle.net/gqe7g/

http://jsfiddle.net/gqe7g/

Loading behavior is strange. It shows Menu1 then collapses it then shows Menu2 and Menu3. I would like everything to open collapsed. I have tried the following without success

加载方式很奇怪。它显示Menu1然后折叠然后显示Menu2和Menu3。我希望一切都崩溃了。我试过以下方法，但没有成功

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

13 个解决方案

#1

Replacing

替换

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

with:

:

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

should do the trick. I think the first one is toggled on by default and this one line switches it off.

应该足够了。我想第一行默认是打开的，这一行是关闭的。

#2

From the doc:

从医生:

If you'd like it to default open, add the additional class in.

如果您希望它默认打开，请添加额外的类。

In other words, leave out the "in" and it will default to close. http://jsfiddle.net/JBRh7/

换句话说，去掉“In”，它将默认关闭。http://jsfiddle.net/JBRh7/

#3

If you want to close all collapsed on page load:

如果你想关闭所有崩溃的页面载入:

In class collapse in replace it to class collapse.

在类崩溃中替换为类崩溃。

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

Update to:

更新:

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

#4

Change

改变

class="accordion-body collapse in"

TO

来

class="accordion-body collapse"

On your collapseOne DIV

在你collapseOne DIV

#5

If you want the accordion to collapse initially you can do so with pre-existing bootstrap definitions, javascript is unnecessary.

如果你想让手风琴在最初的时候崩溃，你可以使用预先存在的引导定义，javascript是不必要的。

Adding the class collapsed to the anchor or handle which will be the click target for users to toggle them open/closed. Also, remove the in class from the collapsing container.

将类添加到锚或句柄中，将成为用户打开/关闭它们的单击目标。另外，从折叠容器中删除in类。

Bootstrap also provides a couple of optional specifications which can be passed by adding data-parent="" and data-toggle=""

Bootstrap还提供了两个可选规范，可通过添加data-parent=""和data-toggle=""来传递这些规范

• data-parent accepts a selector and specifies that all collapsible elements which are siblings of the data-parent will be toggled in unison.
• data-parent接受一个选择器，并指定所有可折叠的元素(它们是数据-parent的兄弟元素)将被一致地切换。
• data-toggle accepts a boolean true or false and sets invocation on the collapsible element.
• data-toggle接受一个布尔值true或false，并在可折叠元素上设置调用。

---

Example Scenarios:

➤ Will load collapsed

➤加载倒塌

<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

➤ Will load expanded

➤加载扩展

<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

➤ Will load expanded

➤加载扩展

<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

In the 3rd example, the accordion will default to being expanded regardless of the fact that the collapsed class is specified because the in class on the container will receive more weight.

在第3个示例中，不管是否指定了崩溃类，手风琴都将默认扩展，因为容器中的类将获得更多的权重。

---

If you do want to trigger the accordion via Javascript you only have to call the method collapse() along with the appropriate id or class selector which targets the collapsible element.

如果您确实希望通过Javascript触发手风琴导航，那么您只需调用方法折叠()以及针对可折叠元素的适当id或类选择器。

collapse() also accepts the same options as can be added to the markup. data-parent and data-toggle

折叠()还接受可以添加到标记的相同选项。data-parent和data-toggle

#6

you're missing the class 'in' on accordion-body divs for Menu2 and Menu3

你错过了为《Menu2》和《Menu3》配手风琴的班

each of your accordion-body divs needs to have class="accordion-body collapse in". Right now, a couple of them just have class="accordion-body collapse"

你的每个手风琴手都需要有class="手风琴手-身体折叠"。现在，它们中的一些只是class="accordion-body折叠"

http://jsfiddle.net/fcJJT/

http://jsfiddle.net/fcJJT/

#7

You can pass the option toggle: false to the collapse statement to have all elements of the accordion hidden on load, like so:

您可以传递选项toggle: false到崩溃语句，使手风琴导航的所有元素都隐藏在负载上，如下所示:

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

Demo: http://jsfiddle.net/gqe7g/9/

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

#8

this is what i use for my accordian. it starts off fully closed. you want

这就是我的手风琴。一开始是完全关闭的。你想要的

 active: false;//this does the trick

full:

全部:

<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>

Not familiar with bottstrap but this seems a bit cleaner than all the classes you have to deal with and works smoothly.

虽然不熟悉bottstrap，但这似乎比您必须处理的所有类都要干净一些，并且工作得很顺利。

#9

Just remove the .in class from .panel-collapse in "collapseOne". (Bootstrap v3.3.7)

只要将.panel-collapse中的.in类从“折叠”中移除。(引导v3.3.7)

#10

Use the hide method that Bootstrap provides,

使用Bootstrap提供的隐藏方法，

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

Demo at http://thefanciful.com. My information is hidden on load, and activates when the button is pushed. :)

演示http://thefanciful.com。我的信息隐藏在负载上，当按下按钮时激活。:)

#11

Using jQuery, This worked for me having ALL containers collapsed at page load

使用jQuery，我可以让所有容器在页面加载时崩溃

Adding {active: false} and must have collapsible enabled of course

添加{active: false}，当然必须启用可折叠性

  $(function () {
      $("#accordion").accordion({ collapsible: true, active: false });
      $(".selector").accordion();
  });

#12

<script type="text/javascript">  

    jQuery(document).ready(function ($) {

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

</script>

#13

I know this is an old discussion, but here are two more solutions that worked:

我知道这是一个古老的讨论，但这里还有两个解决方案:

1) Add

1)添加

a class of aria-expanded="true" inside this link:

在这个链接中有一类aria展开的=“true”:

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

2) In case you're using panels (like below)

2)如果您正在使用面板(如下所示)

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

changing collapse in to collapse out will also do the trick

将“崩溃”改为“崩溃”也会起到同样的作用