Bootstrap无序列表折叠组件首次点击无响应问题求助

问题原因 #

你遇到的首次点击折叠无效、第二次才生效的问题，本质是Bootstrap Collapse组件的内部状态与DOM初始状态不同步。虽然你给列表加了collapse.show（展开状态），按钮也设置了aria-expanded="true"，但组件自动初始化时，没有正确同步这一状态，导致首次点击时组件误判当前状态，切换后反而和实际DOM状态一致，第二次点击才会触发预期的折叠/展开。

解决方案 #

方案1：手动初始化同步状态 #

在引入bootstrap.bundle.min.js之后，添加以下脚本，确保组件内部状态与DOM完全匹配：

document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('.collapse').forEach(el => {
    const collapse = new bootstrap.Collapse(el, { toggle: false });
    el.classList.contains('show') ? collapse.show() : collapse.hide();
  });
});

这段代码会在DOM加载完成后，遍历所有折叠元素，手动初始化并同步展开/折叠状态，让组件内部状态和DOM显示状态完全一致。

方案2：优化HTML结构（推荐） #

原生<img>元素即使加了role="button"，也不是标准交互控件，可能存在事件绑定的细微问题。建议把文件夹图标包裹在标准<button>标签中，同时确保属性与状态严格对应：

<!-- 替换原来的img按钮结构 -->
<li>
  <button type="button" class="btn p-0" data-bs-toggle="collapse" data-bs-target="#UL1" aria-controls="UL1" aria-expanded="true">
    <img src='https://www.cirp.org/fonts/bi/folder.svg' alt='Folder' title='Folder' width='20' height='20'>
  </button>
  &nbsp;<b><a href='/AAP'>AAP</a></b>
</li>

标准按钮能更好地兼容Bootstrap的交互逻辑，同时确保aria-expanded="true"与对应列表的collapse.show严格匹配，组件自动初始化时就能正确识别状态。

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