代码之家 › 专栏 › 技术社区 › Alexander David

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

bootstrap-4 twitter-bootstrap javascript

4

Alexander David · 技术社区 · 8 年前

我之前读过一些关于导航栏和菜单的文章,但似乎并不适用。我有一个非常简单的例子:两张卡片,一张默认打开,另一张折叠。当我试图通过按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>

1 回复 | 直到 5 年前

1

2

BeeBee8 8 年前

你确定你在使用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/

检查要导入的引导版本。