Bootstrap 5 Accordion放置于折叠div内无法正常联动问题

问题原因 #

1. HTML结构存在语法错误：底部的<nav class="navbar fixed-bottom navbar-light bg-light footer-nav">标签没有闭合，导致浏览器解析DOM结构时出现混乱，手风琴项绑定的data-bs-parent="#accordionExample"无法正确定位到所属的父容器，同组折叠项的互斥关闭逻辑自然失效。
2. 额外补充：如果你的手风琴默认处于隐藏状态（外层折叠容器默认收起），部分旧版本的Bootstrap 5自动初始化逻辑不会处理隐藏DOM内的组件，也会导致互斥事件绑定失败。

修复方案 #

1. 先修正DOM结构错误，给底部未闭合的nav标签添加闭合标记</nav>，大部分情况下修正后问题就会直接解决。
2. 如果修正结构后问题仍存在，可在页面加载完成后手动初始化手风琴组件，添加如下JS代码即可：

document.addEventListener('DOMContentLoaded', function () {
  // 手动初始化手风琴，明确指定父容器
  new bootstrap.Accordion('#accordionExample', {
    parent: '#accordionExample'
  })
})

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