2

我试图为此找到解决方案，但现在我被困住了。尝试了在这个问题中找到的解决方案：如何让我的手风琴在所有菜单关闭的情况下加载？（即试图添加$("#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');
});
4

2 回答 2

4

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

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

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

于 2013-04-26T09:12:40.973 回答
1

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

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

根据Bootstrap 4 文档：

  • .collapse隐藏内容
  • .collapse.show显示内容
于 2020-03-15T10:40:28.790 回答