折叠卡打开然后立即再次关闭

Question

我已经阅读了以前的线程，这些线程涵盖了导航栏和菜单的这个问题，但它似乎并不适用。 我有一个非常简单的例子：两张卡片，一张默认打开，另一张折叠。 当我尝试通过按 Card 2 按钮展开第二张卡时，它打开但又立即关闭。 我不确定我做错了什么。

这里的例子：

<div id="accordion">
    <div class="card">
        <div class="card-header" id="header1">
            <h5 class="mb-0">
                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse1" aria-expanded="true" aria-controls="collapse1">
                    Card 1 Button
                </button>
            </h5>
        </div>
        <div id="collapse1" class="collapse show" aria-labelledby="header1" data-parent="#accordion">
            <div class="card-body">
                Card 1 Content
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header" id="header2">
            <h5 class="mb-0">
                <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapse2" aria-expanded="false" aria-controls="collapse2">
                    Card 2 Button
                </button>
            </h5>
        </div>
        <div id="collapse2" class="collapse" aria-labelledby="header2" data-parent="#accordion">
            <div class="card-body">
                Card 2 Content
            </div>
        </div>
    </div>
</div>

Answer 1

您确定您使用的是 Bootstrap 4 吗？

在引导程序 3 中，它的工作方式如下，

您需要使用in class 而不是show以使其在页面加载时默认打开。

<div id="collapse1" class="collapse in" aria-labelledby="header1" data-parent="#accordion">
            <div class="card-body">
                Card 1 Content
            </div>
        </div>

jsFiddle https://jsfiddle.net/0uk0xuvd/

检查您正在导入的引导程序版本。