Question

我正在尝试按照这里的例子

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

我在这里放置了一个模型

加载行为很奇怪。它显示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

如果您希望accordion到collapse最初使用预先存在的bootstrap定义，则不需要javascript。

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

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

data-parent接受一个选择器，并指定所有可折叠元素都是数据父级的兄弟姐妹，将一致切换。
data-toggle接受布尔值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

在第3个示例中，无论指定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/

Answer 7

您可以将选项toggle: false传递给collapse语句，以便在加载时隐藏手风琴的所有元素，如下所示：

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

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

Answer 8

这是我用于手风琴的东西。它从完全关闭开始。你想要

 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>

不熟悉瓶装，但这似乎比你必须处理的所有课程更清洁，并且工作顺利。

Answer 9

只需从＆＃34; collapseOne＆＃34;中的.in中删除.panel-collapse课程即可。（Bootstrap v3.3.7）

Answer 10

使用Bootstrap提供的hide方法

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

http://thefanciful.com的演示。我的信息在加载时隐藏，并在按下按钮时激活。：）

Answer 11

使用jQuery ，这适用于我在页面加载时已折叠所有容器

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

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

Answer 12

<script type="text/javascript">  

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

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

</script>

Answer 13

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

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也可以解决问题

Answer 14

我知道这可能是一种小技巧，但是我添加了自定义CSS：

WMAsfReader

然后复制列表中的第一项，这样做的好处是，如果页面或站点上有多个手风琴，则只需执行一次。

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

14 个答案:

示例场景：