嵌套Bootstrap 5手风琴无法自动关闭已打开面板的问题排查

可能的故障原因及修复方案 #

• 同一子手风琴组存在多个默认展开项 #

你提供的代码中#country-accordion-two（南美洲对应的国家手风琴）下，Curacao和Trinidad and Tobago两个面板都添加了show类、对应触发按钮也都设置了aria-expanded="true"。Bootstrap 5手风琴的互斥关闭逻辑要求同一父级手风琴容器下，同一时间最多只能有1个展开项，初始同时存在多个展开项会直接导致互斥逻辑失效。
修复方式：删除多余的show类，将非默认展开项的按钮aria-expanded属性改为false，保证每个子手风琴组初始最多只有1个展开项。

• 使用的Bootstrap 5.1.2版本存在嵌套手风琴已知bug #

Bootstrap 5.1.x版本存在嵌套手风琴的data-bs-parent识别异常的已知问题，该问题在5.2.0及之后版本已被官方修复。
修复方式：将Bootstrap的CSS和JS依赖升级到5.2.0以上版本即可。

• 自定义脚本冲突 #

如果你的页面存在自定义操作折叠面板的JS代码，可能存在阻止Bootstrap默认折叠事件冒泡、或者重复初始化手风琴组件的情况，导致互斥逻辑被覆盖。
修复方式：暂时注释所有自定义JS代码验证是否恢复正常，逐步排查冲突的代码段。

• ID拼写/大小写匹配问题 #

虽然你已经确认data-bs-parent配置正确，但仍建议排查子手风琴容器ID和内部面板data-bs-parent属性值的大小写、特殊字符是否完全一致，HTML的ID属性是大小写敏感的，细微的拼写差异就会导致互斥逻辑失效。

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