Bootstrap数据切换在第二次单击（而不是第一次单击）后折叠div [英] Bootstrap data-toggle collapses div after second click, not first

问题描述

我有一个简单示例，其中包含Bootstrap并通过单击切换div。这里是标记：

I have the simple example with Bootstrap and toggling divs by click. Here is markup:

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

当用户点击链接标题为 Open！的基础div扩展或折叠时。 Div最初会展开，并且在用户第一次单击时不会起作用。然后，如果用户第二次单击，div将崩溃。

When user clixks link with title 'Open!' underlying div expands or collapses. Div is expanded initially and when user clicks first time it has no effect. Then if user clicks second time, div collapses.

在原始示例中，div最初是折叠的，但我希望将其打开。我该如何解决该问题？

In the original example div is collapsed initially but I would like it to be opened. How could I fix the problem?

推荐答案

只需将class'collaspe in'添加到class = accordion-body。

Just add class 'collaspe in' to class="accordion-body".

在 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>

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

I hope this will fix your issue. Enjoy :)

这篇关于Bootstrap数据切换在第二次单击（而不是第一次单击）后折叠div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！