Question

我试图找到一个解决方案，但现在我被卡住了。尝试了在这个问题中找到的解决方案：How do I get my accordion to load with all the menus closed?（即试图添加$("#facts").collapse('hide');等等）但没有运气。

我有一个jsFiddle在这里工作：http://jsfiddle.net/mwxkr/1/

我的问题是，当页面加载时，折叠div是打开的，当行$(".collapse").collapse('hide');运行时，div会滑动到关闭状态。当您打开页面时，这看起来像一个错误。我希望div在页面加载时开始关闭并保持关闭，直到按下按钮。

一些加价：

<button type="button" class="btn btn-info btn-small" data-toggle="collapse" data-target="#facts">Show facts</button>
<button type="button" class="btn btn-warning btn-small" data-toggle="collapse" data-target="#more">Show more</button>
<div id="facts" class="collapse">
   <div class="contents">
     Some facts...
   </div>
</div>
<div id="more" class="collapse">
   <div class="contents">
     More facts...
   </div>
</div>

JS :( jQuery和bootstrap collapse.js已加载）

$(document).ready(function() {
   $(".collapse").collapse('hide');
});

Answer 1

您不需要js，在加载页面时会自动隐藏折叠元素：

<div id="facts" class="collapse">

http://jsfiddle.net/2EwN6/9/

Answer 2

对于Boostrap 4，折叠默认情况下是关闭的。如果您希望它在页面加载时打开，则只需添加类show：

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

根据Bootstrap 4 documention：

.collapse隐藏内容
.collapse.show显示内容

引导崩溃DIV在DOM加载时打开

2 个答案: