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 会自动绑定事件。