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

Question

我试图按照这里的示例

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

我在这里放置了一个模型

http://jsfiddle.net/gqe7g/

加载行为是 奇怪的。它显示 Menu1，然后折叠它，然后显示 Menu2 和 Menu3。我想把所有打开的东西都折叠起来。我尝试过以下操作但没有成功

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

Answer 1

来自文档：

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

换句话说，省略“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

如果您想要手风琴到collapse 最初，您可以使用预先存在的 bootstrap 定义，不需要javascript。

将 collapsed 类添加到锚点或句柄，该锚点或句柄将成为用户切换 它们打开/关闭。另外，从折叠容器中删除 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

在第三个示例中，手风琴将默认展开，无论事实上，指定 collapsed 类是因为容器上的 in 类将获得更多权重。

---

如果您确实想通过 Javascript 触发折叠面板，您只需调用方法 collapse() 以及针对可折叠元素的相应 id 或类选择器。

collapse() 还接受与添加到标记中相同的选项。 data-parent 和 data-toggle

Answer 6

您缺少 Menu2 和 Menu3 的折叠体 div 上的类“in”，

每个折叠体 div 都需要 class="accordion-body crash in"。现在，其中一些只有 class="accordion-body crash"

http://jsfiddle.net/fcJJT /

Answer 7

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

$('.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>

不熟悉bottstrap，但这似乎比你必须处理的所有课程都要干净一些，并且工作顺利。

Answer 9

只需从“collapseOne”中的 .panel-collapse 中删除 .in 类即可。 （引导程序 v3.3.7）

Answer 10

使用Bootstrap提供的hide方法，

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

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

Answer 11

使用 jQuery，这对我来说很有用，在页面加载时所有容器折叠

添加 {active: false} 并且必须具有可折叠 当然启用

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

我知道这可能是一种有点 hacky 的方式，但我添加了自定义 css：

.elementor-accordion-item:first-child {
显示：无；
}

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