默认情况下引导未折叠面板

我有一个可折叠的面板，但我希望它是不折叠的默认。

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

如果我从

<div id="collapse1" class="panel-collapse collapse">

它工作，但第一次点击解压不工作。

73340 次浏览
小开
最佳答案

在 Bootstrap 3.x 中，在可折叠的 div 中添加一个“ In”类

<div id="collapse1" class="panel-collapse collapse in">

默认情况下，它将保持 div 处于打开状态。

更新:

使用 Bootstrap 4.0，您需要添加 show类来代替 in。

小开

将类 in添加到 id 为 collapse1的面板中，如下所示

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

小开

您可以使用一些 js 来删除窗口加载时的类

$(window).load(function() {
$("#collapse1").removeClass("collapse");
});
小开

在手风琴下加上[ closeOther ] = “ true” 和[ isOpen ] = 手风琴组下的“ true”

小开

使用 Boostrap 4，只需添加类 show来显示页面加载时折叠的内容:

<div class="collapse show">...</div>

根据 Bootstrap 4文档:

  • .collapse隐藏内容
  • .collapse.show显示内容
小开 
<div class="collapse in show" id="collapseExample">

提交答案