引导最初折叠的元素答案

【问题标题】：bootstrap initially collapsed element引导最初折叠的元素
【发布时间】：2013-04-22 14:41:28
【问题描述】：

我正在使用bootstrap 模板，我想更改accordion 默认的工作方式。

如何在第一次看到页面时（加载时）关闭切换？

<div class="accordion-heading">
    <a class="accordion-toggle"
       data-toggle="collapse"
       data-parent="#accordion2"
       href="#collapseOne">Open!</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
    <div class="span6">
        <div class="well well-small">
            <div class="accordion-toggle">
                ...some text...
            </div>
        </div>
    </div>
    <div class="span2"></div>                            
</div>

【问题讨论】：

不太明白您希望手风琴最初是折叠的吗？
是的，我希望它在页面加载时关闭。
好的。只需要删除“in”。请看答案...

标签： html css twitter-bootstrap toggle

【解决方案1】：

当您展开或折叠手风琴时，它只会添加/删除“in”类并将 height:auto 或 0 设置为手风琴 div。

Demo

因此，在您的手风琴中，当您定义它时，只需从 div 中删除“in”类，如下所示。每当您展开手风琴时，它只会添加“in”类以使其可见。

如果您使用“in”引导程序呈现页面，则会查找类，它将使 div 的高度：auto，如果不存在，它将为零高度。

<div id="collapseOne" class="accordion-body collapse">

【讨论】：

【解决方案2】：

您需要从“collapse in”中删除“in”

【讨论】：

【解决方案3】：

另一种解决方案是将toggle=false添加到折叠目标，这将阻止它随机打开和关闭，如果你只是删除“in”就会发生这种情况

例如

<div class="accordion-heading">
    <a class="accordion-toggle"
        data-toggle="collapse"
        data-parent="#accordion2"
        href="#collapseOne">Open!</a>
</div>
<div
    id="collapseOne"
    class="accordion-body collapse"
    data-toggle="false"
    >
    <div class="span6">
        <div class="well well-small">
            <div class="accordion-toggle">
                ...some text...
            </div>
        </div>
    </div>
    <div class="span2"></div>                            
</div>

【讨论】：

这对我帮助很大。我有一个 div，最初应该显示，然后使用切换隐藏。但是，如果没有 data-toggle="false" 它首先淡入 div（看起来很愚蠢，因为它已经可见），然后从第二个切换开始，它会按预期工作。
也解决了我的问题，谢谢。我的 div（包含一个按钮）最初是折叠的，并且会奇怪地再次显示和隐藏前两次它上面的表单中的任何内容被编辑...
谢谢！这解决了我的问题。我一开始就没有“in”，而且最初它仍然被扩展。添加 data-toggle="false" 为我解决了这个问题。

【解决方案4】：

只需在折叠元素的类中添加“show”类，bootstrap 会使用 js 动态删除它以折叠并显示

【讨论】：

这在 2019 年使用 Bootstrap 4.x 对我有用。随着时间的推移，引导类的工作方式可能会发生变化。谢谢。

【解决方案5】：

需要从类中删除show：

<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">

应该是的

<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">

【讨论】：

【解决方案6】：

我刚刚在“card-body”之前的 div 中添加了 class hide，默认情况下它是隐藏的。

<div id="collapseOne" class="collapse hide" aria-labelledby="headingOne" data-parent="#accordion">

【讨论】：

【解决方案7】：

accordian 中有一个类，它只是将高度从 height:auto 或 0 调整到accordian div。

如果您删除“in”类并且当您单击它时，bootstrap 会再次添加“in”类，现在内容将可见

<div id="collapseOne" class="accordion-body collapse">
....
</div>

【讨论】：

【解决方案8】：

对于 bootstrap v4+，您需要删除“show”类，而不是删除“in”类

<div id="accordion">
 <div class="card">
  <div class="card-header" id="headingOne">
   <h5 class="mb-0">
    <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
      Collapsible Group Item #1
    </button>
   </h5>
 </div>

 <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
  <div class="card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
  </div>
</div>

【讨论】：

【解决方案9】：

如果删除 in 类对您不起作用，例如我的情况，您可以使用 CSS 显示属性强制折叠初始状态：

...
<div id="collapseOne" class="accordion-body collapse" style="display: none;">
...

【讨论】：

@VishalKumarSahu 有时您无法控制实现代码的上下文，有时客户只是不支付重新编码或调试它的费用。你必须适应。