我有一个simple example，它带有 Bootstrap ，可以通过点击切换div。
<div class="accordion-heading">
<a class="accordion-toggle"
data-toggle="collapse"
data-parent="#accordion2"
href="#collapseOne">Open!</a>
</div>
<div id="collapseOne" class="accordion-body">
<div class="span6">
<div class="well well-small">
<div class="accordion-toggle">
...some text...
</div>
</div>
</div>
<div class="span2"></div>
</div>当用户点击链接标题为“打开！”时，底层的div会展开或折叠。最初，Div会展开，当用户第一次点击时，它没有任何效果。然后，如果用户第二次点击，div会折叠。
在original example div最初是折叠的，但我希望它被打开。我如何解决这个问题？
7条答案
按热度按时间6mw9ycah1#
只需将class 'collaspe in'添加到class=“accordion-body”。
检查CODEPEN上的示例代码
HTML：
我希望这能解决你的问题。好好享受吧：）
but5z9lq2#
我遇到了这个问题，在我的例子中，我愚蠢地在div中插入了两个“class”属性，我想这样崩溃：
浏览器似乎消除了第二个类属性，而不是合并它们。
我的问题通过将两个类属性“合并”在一起得到了解决：
68bkxrlz3#
这将使其可折叠，但默认情况下显示面板。当您单击折叠按钮时，它将在第一次单击时折叠面板。
我只是在这里添加这个，如果有人正在寻找这样做的方式。我发现这个链接时，其逆搜索。希望它有帮助！
dddzy1tm4#
你应该只调用
bootstrap.min.js一次。确保你只在<head>部分调用一次引导文件。如果你在Laravel或任何类型的框架中使用Bootstrap，请记住npm run dev在app.js中编译引导js文件。这可能是这种情况。a64a0gku5#
这也将使它在默认情况下关闭，并在单击时打开
f2uvfpb96#
我也有这个问题。设置id和data-bs-parent
cyvaqqii7#
如果有人想知道为什么会这样，可能你没有添加“collapse”类到你想折叠的元素。如果你想默认显示折叠元素，你可以添加“collapse show”。如果你没有添加collapse，你的data-bs-toggle=“collapse”属性找不到一个“collapse”类来切换你的目标元素。所以当你第一次点击目标元素时，bootstrap会添加collapse和show到那个div。这会导致你看到它的折叠和显示后，你第一次点击。
如果要默认隐藏目标元素，请在目标元素中添加“collapse”
如果您想显示目标元素，但希望它在单击时折叠，请在目标元素中添加“折叠显示”
bootstrap会帮你搞定一切