Bootstrap 手风琴咏叹调扩展不起作用

Question

我正在使用 bootstrap 4 手风琴。我想作为初始状态让所有卡片都折叠起来。我将 aria-expanded 设置为 false，但所有卡片都显示为已展开。

<div id="accordion">
            <!-- ko foreach: $root.Addons() -->
            <div class="card">
                <div class="card-header" id="headingOne">
                    <h5 class="mb-0">
                        <button class="btn btn-link" data-toggle="collapse" aria-expanded="false" data-bind="text:name, attr: { 'data-target': '#collapsible' +  $index(),'aria-controls': 'collapsible' +  $index() }"></button>
                    </h5>
                </div>
                <div data-bind="attr: { id: 'collapsible' + $index() }" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
                    <div class="card-body">
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                    </div>
                </div>
            </div>
            <!-- /ko -->
        </div>

我做错了什么？

Answer 1

您需要更新处于折叠状态的 classes。

1) 在按钮元素

中添加class collapsed和btn btn-link

2) 从 div 元素

中的 collapse show 移除 class show

我已经用上述更改更新了代码。它应该使手风琴最初保持折叠状态。

<div id="accordion">
            <!-- ko foreach: $root.Addons() -->
            <div class="card">
                <div class="card-header" id="headingOne">
                    <h5 class="mb-0">
                        <button class="btn btn-link collapsed" data-toggle="collapse" aria-expanded="false" data-bind="text:name, attr: { 'data-target': '#collapsible' +  $index(),'aria-controls': 'collapsible' +  $index() }"></button>
                    </h5>
                </div>
                <div data-bind="attr: { id: 'collapsible' + $index() }" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
                    <div class="card-body">
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                    </div>
                </div>
            </div>
            <!-- /ko -->
        </div>

Bootstrap 手风琴咏叹调扩展不起作用

Bootstrap accordion aria-expanded doesnt work

accordion

twitter-bootstrap

knockout.js