Question

我正在使用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>

Answer 1

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

Demo

所以在你的手风琴中定义它时只需从div中删除“in”类，如下所示。每当你扩展一个accorion时，它只是添加“in”类以使其可见。

如果使用“in”引导页面，则会查找该类，并且它将使div的高度为：auto，如果它不存在则将为零高度。

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

Answer 2

您需要从“崩溃”

中删除“in”

Answer 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>

Answer 4

我刚刚将class hide添加到div的“ card-body”之前，并且默认情况下将其隐藏。

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

Answer 5

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

Answer 6

需要从课程中删除显示：

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

必须是

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

Answer 7

手风琴中有一类可以将高度从height：auto或0调整到手风琴div。

如果您删除“班级”并单击它，则引导程序会再次添加“班级”，现在内容将可见

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

Answer 8

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

queue

Answer 9

如果删除in类并不适合您，我的情况就是这样，您可以使用CSS显示属性强制折叠初始状态：

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

bootstrap最初是折叠元素

9 个答案: