Html bootstrap 初始折叠元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16149923/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap initially collapsed element
提问by JoshuaJeanThree
I am using the bootstraptemplate and I would like to change the way the accordionworks by default.
我正在使用bootstrap模板，我想更改默认情况下手风琴的工作方式。
How can I get the toggle to be closed when page is first seen (upon load)?
如何在第一次看到页面时（加载时）关闭切换开关？
<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>
回答by PSL
When you expand or collapse accordion it just adds/removes a class "in" and sets the height:autoor 0to the accordion div.
当您展开或折叠手风琴时，它只会添加/删除“in”类并将height:auto或0设置为手风琴 div。
So in your accordion when you define it just remove "in" class from the div as below. Whenever you expand an accorion it just adds the "in" class to make it visible.
所以在你的手风琴中，当你定义它时，只需从 div 中删除“in”类，如下所示。每当您展开手风琴时，它只会添加“in”类以使其可见。
If you render the page with "in" bootstrap looks for the class and it will make the div's height:auto, if it not present it will be at zero height.
如果您使用“in”引导程序呈现页面，则会查找该类，它将使 div 的高度为：自动，如果不存在，它将处于零高度。
<div id="collapseOne" class="accordion-body collapse">
回答by elektrorl
You need to remove "in" from "collapse in"
您需要从“collapse in”中删除“in”
回答by aqm
another solution is to add toggle=false to the collapse target, this will stop it randomly opening and closing which happens if you just remove the "in"
另一个解决方案是将 toggle=false 添加到折叠目标，这将阻止它随机打开和关闭，如果您只是删除“in”
eg
例如
<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>
回答by Tonui
Just add class "show" to the collapsing element's class, bootstrap will use js dynamically to remove it to collapse and show
只需将类“show”添加到折叠元素的类中，bootstrap 将使用 js 动态删除它以折叠并显示
回答by elftine
need to delete showfrom class:
需要从课程中删除节目：
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
It have to be
它必须是
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
回答by sanghmitra
There is a class in accordian which just adjust height from height:auto or 0 to the accordian div.
手风琴中有一个类，它只是将高度从 height:auto 或 0 调整到手风琴 div。
if you remove 'in' class and when you click on it, bootstrap adds 'in' class again and now content will be visible
如果您删除“in”类并单击它时，引导程序再次添加“in”类，现在内容将可见
<div id="collapseOne" class="accordion-body collapse">
....
</div>
回答by Igor Pavlenko
I just added class hide to the div before "card-body" and it hidden by default.
我只是在“card-body”之前将 class hide 添加到 div 中，默认情况下它是隐藏的。
<div id="collapseOne" class="collapse hide" aria-labelledby="headingOne" data-parent="#accordion">
<div id="collapseOne" class="collapse hide" aria-labelledby="headingOne" data-parent="#accordion">
回答by Leopoldo Sanczyk
If removing the inclass doesn't work for you, such was my case, you can force the collapsed initial state using the CSS display property:
如果删除in类对您不起作用，这就是我的情况，您可以使用 CSS display 属性强制折叠初始状态：
...
<div id="collapseOne" class="accordion-body collapse" style="display: none;">
...
