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

Posted 2023-03-05

【中文标题】如何让我的手风琴在所有菜单关闭的情况下加载？

【英文标题】：How do I get my accordion to load with all the menus closed?

【发布时间】：2012-03-14 05:41:45

【问题描述】：

我正在尝试按照此处的示例进行操作

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

我在这里放了一个模型

http://jsfiddle.net/gqe7g/

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

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

【问题讨论】：

看到这个：加载时全部折叠问题 - github.com/twitter/bootstrap/issues/3070

【参考方案1】：

我知道这可能有点老套，但我添加了自定义 css：

.elementor-accordion-item:first-child display: none;

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

【参考方案2】：

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

【参考方案3】：

改变

class="accordion-body collapse in"

到

class="accordion-body collapse"

在您的 collapseOne DIV

【参考方案4】：

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

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

【参考方案5】：

如果你想在页面加载时关闭所有折叠：

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

【参考方案6】：

<script type="text/javascript">  

    jQuery(document).ready(function ($) 

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

</script>

【参考方案7】：

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

添加active: false，当然必须启用collapsible

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

【讨论】：

.accordion() 不是引导程序的一部分，而是 jquery.ui a.f.a.i.k.

【参考方案8】：

如果您最初希望 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

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

---

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

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

【讨论】：

这对于调试基于 localStorage 打开和关闭的手风琴非常有用 -.- 谢谢！ +1

【参考方案9】：

使用 Bootstrap 提供的 hide 方法，

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

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

【参考方案10】：

来自文档：

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

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

【讨论】：

请求者询问如何使其默认不打开。默认情况下，Twitter 上的示例代码包含“in”类，这就是它默认显示的原因。所以请求者只需要从类名中删除“in”即可。

最佳答案在这里。轻松、简单且完美的修复。

这应该是***评论！

是的，这仍然存在，并且可能应该被标记为已接受的答案。节省一些滚动/狩猎:)

最简单、最合乎逻辑的答案。正确的方法，一目了然。

【参考方案11】：

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

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

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

【讨论】：

这是正确答案。至少在需要使用 JavaScrip API 时，仅省略 'in' 类并没有帮助。如果没有toggle: false，它将执行以下代码：github.com/twbs/bootstrap/blob/master/js/collapse.js#L29（options.toggle 默认为 true）并显示隐藏内容。

【参考方案12】：

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

 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，但这似乎比你必须处理的所有类更干净，并且运行顺利。

【讨论】：

看起来您正在使用 jQuery。我有引导程序

【参考方案13】：

更换

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

与：

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

应该可以解决问题。我认为第一个默认打开，这一行将其关闭。

【讨论】：

它实际上是 $('#collapse').collapse("hide");这可以解决问题

这仍然会在 DOM 准备好后显示折叠动画，这使它看起来像一个 hack。更改所有选项卡，如 将在页面加载时折叠所有选项卡。

【参考方案14】：

您在 Menu2 和 Menu3 的手风琴体 div 上缺少“in”类

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

http://jsfiddle.net/fcJJT/

【讨论】：

谢谢。我注意到在没有用户输入的情况下直接折叠之前，一切仍然开始完全未折叠。你知道我如何移除这个初始的展开效果吗？

不，我不确定。我自己对这些东西很陌生