logo标签列表

Bootstrap最初折叠元素

htmlcsstwitter-bootstraptoggle
68

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

当页面首次加载时，如何使切换内容处于关闭状态？

<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>
1
你是想让手风琴一开始就处于折叠状态吗？ - PSL
2
是的，我希望它在页面加载时关闭。 - JoshuaJeanThree
7
好的，请移除“in”。请查看答案... - PSL
9个回答
96
当您展开或折叠手风琴时，它只是添加/删除一个名为“in”的类，并将height:auto或0设置为手风琴div的高度。因此，在定义手风琴时，只需从div中删除“in”类，如下所示。每当您展开手风琴时，它会添加“in”类以使其可见。如果您使用“in”呈现页面，则Bootstrap会查找该类并将div的高度设置为自动，如果不存在则高度为零。

演示

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

你需要从“collapse in”中删除“in”。

12

另一个解决方案是将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>
2
这对我帮助很大。我有一个div应该最初显示，然后使用toggle隐藏。但是如果没有data-toggle="false"，它首先会淡入div（因为它已经可见，看起来很愚蠢），然后从第二个toggle开始，它将按预期工作。 - Marcel Burkhard
1
也解决了我的问题，谢谢。我的div（包含一个按钮）最初是折叠的，并且在上面的表单中的任何内容被编辑的前两次会奇怪地显示和隐藏... - danVnest
1
谢谢！这解决了我的问题。我一开始就没有'in'，但它仍然被扩展了。添加data-toggle="false"对我有帮助。 - Anthony Tambrin
5
只需将“show”类添加到折叠元素的类中，Bootstrap将使用JavaScript动态地删除它以实现折叠和显示。
这在2019年使用Bootstrap 4.x对我有效。也许随着时间推移，Bootstrap类的工作方式发生了变化。谢谢。 - Rich G
1
需要将类中的show删除：
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">

它必须是

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

对于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>
0

我刚刚在 "card-body" 前面的 div 中添加了 hide 类，并且默认情况下它是隐藏的。

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

0

在手风琴中有一个类，它只是将高度从height:auto或0调整到手风琴div的高度。

如果您删除'in'类并单击它，Bootstrap会再次添加'in'类，现在内容将可见。

<div id="collapseOne" class="accordion-body collapse">
....
</div>
-2
如果删除 in 类对你没有用，就像我的情况一样，你可以使用 CSS 的 display 属性来强制折叠初始状态：
...
<div id="collapseOne" class="accordion-body collapse" style="display: none;">
...
@VishalKumarSahu 有时您无法控制代码实现的上下文，有时客户只是不想付款重新编码或调试它。您必须进行适应。 - Leopoldo Sanczyk
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接