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+ 的语法。同时存在会导致行为异常：❌ 错误写法（混合版本）：
<button data-toggle="dropdown" data-bs-toggle="dropdown">...</button>
✅ 正确写法（Bootstrap 4）：
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown <span class="caret"></span> </button> -
确保 HTML 结构完整且语义正确
下拉菜单必须包裹在 .dropdown 容器中（否则事件委托可能失效）：<div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown <span class="caret"></span> </button> <div class="dropdown-menu" aria-labelledby="dropdownMenu1"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div>⚠️ 注意：Bootstrap 4 中 .dropdown-menu 应为 ，而非 ； 已被弃用，应改用 ；.divider 替换为 .dropdown-divider。
✅ 完整可运行示例（Bootstrap 4.6.2）
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Bootstrap 4 Dropdown Fix</title>
</head>
<body class="m-4">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle"
type="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
点击展开菜单 <span class="caret"></span>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<a class="dropdown-item" href="#">选项一</a>
<a class="dropdown-item" href="#">选项二</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">分离链接</a>
</div>
</div>
<!-- 必须放在 body 底部 -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>? 排查建议
- 打开浏览器开发者工具（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 会自动绑定事件。
