Bootstrap崩溃DIV在DOM加载时打开

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 crash.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显示内容