如何在关闭所有菜单的情况下加载手风琴？

Question

我试着按照这里的例子

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

我在这里放了一个样机

http://jsfiddle.net/gqe7g/

加载行为很奇怪.它显示Menu1然后折叠它然后显示Menu2和Menu3.我希望一切都打开倒塌.我试过以下但没有成功

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

Answer 1

来自doc:

如果您希望它默认打开,请添加其他类.

换句话说,省略"in"并默认关闭.http://jsfiddle.net/JBRh7/

Answer 2

如果要在页面加载时关闭所有折叠:

在课堂collapse in上将其替换为课堂collapse.

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

更新至:

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

Answer 3

更换

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

有:

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

应该做的伎俩.我认为第一个是默认切换,这一行将其关闭.

Answer 4

更改

class="accordion-body collapse in"

至

class="accordion-body collapse"

在你的collapseOne DIV上

Answer 5

如果你想在手风琴到崩溃开始,你可以用预先存在这样做引导的定义,JavaScript是不必要的.

将类添加collapsed到锚点或句柄,这将是用户切换打开/关闭的点击目标.此外,in从折叠容器中删除该类.

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

• data-parent 接受一个选择器,并指定所有可折叠的元素是数据父级的兄弟,它们将一致切换.
• data-toggle接受boolean true或false在可折叠元素上设置调用.

示例场景:

➤ 将加载折叠

<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或类选择器.

collapse()也接受可添加到标记的相同选项. data-parent和data-toggle

Answer 6

你错过了Menu2和Menu3的accordion-body div上的'in'类

你的每个手风琴身体div都需要class="accordion-body collapse in".现在,他们中的几个人就是class="accordion-body collapse"

http://jsfiddle.net/fcJJT/