twitter-bootstrap 默认情况下 Bootstrap 未折叠面板
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42688320/
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 uncollapsed panel by default
提问by EddyG
I have a collapsable panel but I want it to be uncollapsed by default.
我有一个可折叠面板，但我希望它在默认情况下未折叠。
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">
<span class="glyphicon glyphicon-collapse-down"> </span>1st Round</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">First round details</div>
</div>
</div>
If I remove collapsefrom
如果我删除崩溃从
<div id="collapse1" class="panel-collapse collapse">
It works, but the first time clicked to uncollapse doesn't work.
它有效，但第一次单击以展开不起作用。
回答by Kamlesh Arya
In Bootstrap 3.x, add a class "in" to your collapsable div
在 Bootstrap 3.x 中，向可折叠 div 添加一个“in”类
<div id="collapse1" class="panel-collapse collapse in">
It will keep your div open by default.
默认情况下，它会让您的 div 保持打开状态。
Update:
更新：
With Bootstrap 4.0, You need to add showclass in place of in.
使用 Bootstrap 4.0，您需要添加show类来代替in.
回答by Shubham Khatri
Add a class into the panel with id collapse1like below
将一个类添加in到面板中，其 IDcollapse1如下所示
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">
<span class="glyphicon glyphicon-collapse-down"> </span>1st Round</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">First round details</div>
</div>
</div>回答by Web Dev Guy
You could use some js to remove the class on window load
您可以使用一些 js 在窗口加载时删除类
$(window).load(fumction() {
$("#collapse1").removeClass("collapse");
});
回答by maelga
With Boostrap 4, simply add the class showto show the collapsed content on page load:
使用 Boostrap 4，只需添加类show即可在页面加载时显示折叠的内容：
<div class="collapse show">...</div>
As per Bootstrap 4 documention:
.collapsehides content.collapse.showshows content
.collapse隐藏内容.collapse.show显示内容
回答by radsin
Add [closeOthers]="true" under accordion and [isOpen]="true" under accordion group
在手风琴下添加 [closeOthers]="true" 和在手风琴组下添加 [isOpen]="true"
