为何Bootstrap 5.2.2的min.js无法处理下拉子菜单？

Bootstrap 5.2.2下拉子菜单失效的原因及解决办法 #

核心原因 #

1. Data属性前缀变更
   Bootstrap 5 为避免与其他框架属性冲突，给所有交互类的data属性添加了bs前缀，Bootstrap 4中使用的data-toggle在Bootstrap 5里不再被识别，必须替换为data-bs-toggle。

2. 重复引入JS文件引发冲突
   你同时加载了bootstrap.min.js和bootstrap.bundle.min.js，后者已经包含了前者的全部核心功能+Popper.js（下拉/弹出功能依赖的库），重复加载会导致JS逻辑冲突，直接破坏折叠切换功能。

3. 结构类适配缺失（可选但推荐）
   如果该子菜单用于Bootstrap导航栏内，父<li>和链接元素缺少nav-item、nav-link类，会导致样式和功能的适配性下降。

修复步骤 #

1. 修正JS引入（仅保留bundle版本）

删除重复的bootstrap.min.js，只保留包含完整依赖的bundle版：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>

2. 更新触发元素的data属性并补充结构类

将data-toggle="collapse"替换为data-bs-toggle="collapse"，同时添加适配Bootstrap 5的结构类：

<li class="nav-item">
  <a href="#pageSubmenu" data-bs-toggle="collapse" aria-expanded="false" class="nav-link dropdown-toggle">Pages</a>
  <ul class="collapse list-unstyled" id="pageSubmenu">
    <li>
      <a href="#" class="nav-link">Page 1</a>
    </li>
    <li>
      <a href="#" class="nav-link">Page 2</a>
    </li>
    <li>
      <a href="#" class="nav-link">Page 3</a>
    </li>
  </ul>
</li>

验证说明 #

完成上述修改后，下拉子菜单的折叠切换功能即可正常工作，完全符合Bootstrap 5的官方规范。

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