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

我读过以前的帖子，讨论了导航栏和菜单的这个问题，但它似乎并不适用。我有一个非常简单的例子：两张卡，一张默认打开，另一张折叠。当我尝试按卡 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>

您确定使用的是 Bootstrap 4 吗？

在 Bootstrap 3 中，它的工作原理如下：

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

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

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

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