Question

我已经阅读了以前针对导航栏和菜单解决此问题的主题，但它似乎并不适用。我有一个非常简单的例子：两张牌，一张默认打开，另一张牌崩溃。当我尝试通过按下卡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吗？

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

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

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

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

1 个答案: