Bootstrap 折叠 DIV 在 DOM 加载时打开答案

【问题标题】：Bootstrap collapse DIV is open on DOM loadBootstrap 折叠 DIV 在 DOM 加载时打开
【发布时间】：2013-04-20 09:34:44
【问题描述】：

我试图为此找到解决方案，但现在我陷入了困境。尝试了在这个问题中找到的解决方案：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');
});

【问题讨论】：

如果你删除 $(".collapse").collapse('hide');在您的 jsfiddle 中，div 在加载页面时关闭，没有效果。

标签： jquery twitter-bootstrap collapse

【解决方案1】：

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

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

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

【讨论】：

有趣。我认为需要以一种或另一种方式启动可折叠 div，从某个地方使用了这个例子。我尝试了许多解决方案，但不只是完全删除 js....谢谢！！！

【解决方案2】：

使用 Boostrap 4，折叠默认关闭。如果您希望它在页面加载时打开，您只需添加类show：

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

根据Bootstrap 4 documention：

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

【讨论】：