bootstrap 4 下拉菜单失效（仅展开一次）通常源于 javascript 依赖缺失或版本混用，需确保正确引入 jquery、popper.js 和 bootstrap bundle js，并移除 bootstrap 5 的 `data-bs-toggle` 冗余属性。
在 Bootstrap 4 中，下拉（Dropdown）组件依赖于 JavaScript 动态控制显隐状态。若点击后仅生效一次，大概率是以下原因之一：缺少必需的 JS 文件、JS 加载顺序错误、HTML 结构不完整，或混用了 Bootstrap 5 的属性语法。
✅ 正确配置要点
-
必须引入三类资源（按顺序）：
- 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 单独版）
-
移除 data-bs-toggle 属性
Bootstrap 4 使用 data-toggle="dropdown"，而 data-bs-toggle 是 Bootstrap 5+ 的语法。同时存在会导致行为异常：❌ 错误写法（混合版本）：
✅ 正确写法（Bootstrap 4）：
-
确保 HTML 结构完整且语义正确
下拉菜单必须包裹在 .dropdown 容器中（否则事件委托可能失效）：⚠️ 注意：Bootstrap 4 中 .dropdown-menu 应为 ，而非 ； 已被弃用，应改用 ；.divider 替换为 .dropdown-divider。
✅ 完整可运行示例（Bootstrap 4.6.2）
Bootstrap 4 Dropdown Fix
? 排查建议
- 打开浏览器开发者工具（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 会自动绑定事件。
