Bootstrap - collapse card opens then immediately closes again

时光总嘲笑我的痴心妄想 提交于 2021-02-10 09:33:38

问题


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.

Thanks in advance for any help.

Example here:

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


Are you sure you are using Bootstrap 4?

In bootstrap 3 it works like following,

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.



来源:https://stackoverflow.com/questions/50545901/bootstrap-collapse-card-opens-then-immediately-closes-again

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!