Question

我刚刚在Laravel的付款视图中插入了Bootstrap折叠。当我点击它时，Bootstrap会崩溃，但我想让它自动折叠。

我知道我必须设置：aria-expanded="false"

但它还没有奏效。也许是因为它有这样的自己的id？

href="#collapse{{ $charity->id }}"

以下是我的完整小组代码段：

@foreach($charities as $charity)

    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingOne">
                <h4 class="panel-title">
                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{{ $charity->id }}" aria-expanded="false" aria-controls="collapseOne">
                        <div class="row">
                            <div class="col-xs-3 col-sm-2 col-md-2">
                                <img class="media-object" src="{{ $charity->photo }}" width="75px" height="65px" alt="{{ $charity->name }}">
                            </div>
                            <div class="col-xs-9 col-sm-10 col-md-10">
                                {{ $charity->name }}
                            </div>
                        </div>
                    </a>
                </h4>
            </div>
            <div id="collapse{{ $charity->id }}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                <div class="panel-body">
                    {{ $charity->description }}
                </div>
            </div>
        </div>
    </div>

@endforeach

Answer 1

如果您希望第一个面板在页面加载时关闭，请从中删除.in类。

从此 - ＆gt; <div id="collapse{{ $charity->id }}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">

对此 - ＆gt; <div id="collapse{{ $charity->id }}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">

崩溃插件使用几个类来处理重量级   升降：


.collapse隐藏内容

.collapse.in显示内容

.collapsing在转换开始时添加，并在完成时删除

请参阅文档中的Collapse Usage

示例：

Bootstrap折叠不会自动折叠

1 个答案: