Bootstrap 4 Accordion异常：设aria-expanded=false仍全部展开求助

嘿，我一眼就发现你代码里的问题啦！你已经把aria-expanded设为false了，但折叠面板还是展开，核心原因出在折叠容器的类名上。

在Bootstrap 4中，collapse show这个组合类会强制面板默认处于展开状态——哪怕你设置了aria-expanded="false"也没用，因为show类是直接控制DOM显示的关键标识。

具体修改步骤： #

• 找到每个折叠面板的<div>（也就是带有data-parent="#accordion"的那个元素），把它的类从collapse show改成只保留collapse。

修改后的代码片段： #

<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> 
        <!-- 这里移除了show类 -->
        <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>

另外再确认两个小细节：

• 每个折叠面板的id（collapsible + $index()）和按钮的data-target、aria-controls完全对应，你这里已经用$index()生成了唯一标识，这部分没问题。
• aria-expanded="false"的设置是正确的，它会辅助屏幕阅读器识别面板状态，和视觉上的收起/展开是配套的。

这样修改后，刷新页面就能看到所有面板初始都是收起状态啦！

内容的提问来源于stack exchange，提问作者Digital_Jo4