Bootstrap 4 下拉菜单仅触发一次的解决方案

bootstrap 4 下拉菜单失效（仅展开一次）通常源于 javascript 依赖缺失或版本混用，需确保正确引入 jquery、popper.js 和 bootstrap bundle js，并移除 bootstrap 5 的 `data-bs-toggle` 冗余属性。

在 Bootstrap 4 中，下拉（Dropdown）组件依赖于 JavaScript 动态控制显隐状态。若点击后仅生效一次，大概率是以下原因之一：缺少必需的 JS 文件、JS 加载顺序错误、HTML 结构不完整，或混用了 Bootstrap 5 的属性语法。

✅ 正确配置要点

1. 必须引入三类资源（按顺序）：

   • jQuery（Bootstrap 4 要求 1.9.1+ 或 3.x，推荐 3.5.1 Slim）
   • Popper.js（v1.x，已包含在 bootstrap.bundle.min.js 中）
   • Bootstrap 4 的 bootstrap.bundle.min.js（含 Popper，不要用 bootstrap.min.js 单独版）

2. 移除 data-bs-toggle 属性
   Bootstrap 4 使用 data-toggle=”dropdown”，而 data-bs-toggle 是 Bootstrap 5+ 的语法。同时存在会导致行为异常：

   ❌ 错误写法（混合版本）：

   ……

   ✅ 正确写法（Bootstrap 4）：

      Dropdown  

3. 确保 HTML 结构完整且语义正确
   下拉菜单必须包裹在 .dropdown 容器中（否则事件委托可能失效）：

           Dropdown       
        Action     Another action     Something else here     
        Separated link   
    

   ⚠️ 注意：Bootstrap 4 中 .dropdown-menu 应为，而非；已被弃用，应改用；.divider 替换为 .dropdown-divider。

✅ 完整可运行示例（Bootstrap 4.6.2）

                  
        点击展开菜单       
     选项一       选项二      
      分离链接   
 
       

? 排查建议

• 打开 浏览器 开发者 工具（F12），检查 Console 是否报错（如 jQuery is not defined 或 Dropdown is not a function）；
• 检查 Network 面板，确认 bootstrap.bundle.min.js 和 jquery-3.5.1.slim.min.js 均成功加载（状态码 200）；
• 确保未重复引入多个 jQuery 或 Bootstrap 版本；
• 若使用模块化构建（Webpack/Vite），请确认 bootstrap 包版本为 ^4.6.2，并显式导入 bootstrap/dist/js/bootstrap.bundle.min.js。

遵循以上规范，下拉菜单即可稳定响应多次点击——无需额外初始化脚本，Bootstrap 4 的 data-api 会自动绑定事件。