Question

我有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>

当用户clixks链接标题为“打开！”时底层div扩展或崩溃。 Div最初是扩展的，当用户第一次点击时它没有任何效果。然后，如果用户第二次点击，则div会崩溃。

original example div最初崩溃，但我希望它被打开。我怎么能解决这个问题？

Answer 1

只需在＆＃39;中添加class＆＃39; collaspe to class =＆＃34; accordion-body＆＃34;。

检查CODEPEN

上的示例代码

HTML：

<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 collapse in">
    <div class="span6">
        <div class="well well-small">
            <div class="accordion-toggle">
                ...some text...
            </div>
        </div>
    </div>
    <div class="span2"></div>                            
</div>

我希望这能解决您的问题。享受：）

Answer 2

我遇到了这个问题，在我的情况下，我愚蠢地在div中插入了两个“ class”属性，我想像这样折叠：

<div class="something" id="mydiv" class="collapse in"> <div>

浏览器似乎消除了第二类属性，而不是合并它们。

我的问题通过将两个类属性“合并”而解决：

<div id="mydiv" class="something collapse in"> <div>

Answer 3

vendor.js

这也会默认将其关闭并在单击时打开

Answer 4

<a class="btn btn-primary" data-toggle="collapse" href="#collapsePanel" role="button" aria-expanded="false" aria-controls="collapsePanel">Collapse</a>

<div id="collapsePanel" class="collapse show"><!-- Content Here --></div>

这将使其可折叠，但是默认情况下会显示面板。当您单击“折叠”按钮时，它将在第一次单击时折叠面板。

我只是在这里添加此内容，以便任何人都想这样做。我在搜索反向链接时找到了此链接。希望对您有帮助！

Answer 5

您应该两次致电bootstrap.min.js。确保只调用一次引导文件。如果您将Bootstrap与Laravel或任何类型的框架一起使用，请记住npm run dev会编译app.js中的bootstrap js文件。可能是这样。

Bootstrap数据切换在第二次单击后折叠div，而不是第一次

5 个答案: