折叠卡打开,然后立即再次关闭 [英] collapse card opens then immediately closes again
问题描述
我已经阅读了有关导航栏和菜单的涵盖此问题的先前主题,但似乎并不适用.我有一个非常简单的示例:两张卡,默认情况下一张打开,另一张折叠.当我尝试通过按Card 2 Button扩展第二张卡时,它打开了,但随后又立即关闭了.我不确定自己在做什么错.
I've read previous threads that cover this issue for navbars and menus but it does not seem to apply. I have a very simple example: two cards, one opened by default the other collapsed. When I try to expand the second card by pressing Card 2 Button, it opens but then immediately closes again. I am not sure what I'm doing wrong.
此处示例:
<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吗?
Are you sure you are using Bootstrap 4?
在引导程序3中,其工作方式如下,
In bootstrap 3 it works like following,
您需要使用 in
类而不是 show
使其默认在页面加载时打开.
You need to use in
class instead of show
to make it open by default at the page load.
<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/
检查您要导入的引导程序版本.
Check your bootstrap version that your are importing.
这篇关于折叠卡打开,然后立即再次关闭的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!