bootstrap 下拉菜单无法展开，通常是因为缺少或版本不匹配的依赖脚本（jquery、popper.js、bootstrap js），或 html 结构/属性使用不当。本文将系统讲解正确配置方法、常见错误及完整可运行示例。
bootstrap 下拉菜单无法展开，通常是因为缺少或版本不匹配的依赖脚本（jquery、popper.js、bootstrap js），或 html 结构/属性使用不当。本文将系统讲解正确配置方法、常见错误及完整可运行示例。
要使 Bootstrap 的 dropdown 组件正常工作，必须确保三个核心依赖按正确顺序加载：
- jQuery（Bootstrap 4/5 v4.x 依赖 jQuery；v5.x 已移除 jQuery 依赖，但你的代码明显使用的是 Bootstrap 4）
- Popper.js（v4 要求 Popper v1.x，不可使用 Popper v2+ —— 这是新手最常见的失败原因）
- Bootstrap JavaScript（需在前两者之后加载）
你的原始代码结构基本正确，但存在两个关键隐患：
- 使用了本地路径（js/popper.min.js 等），若文件缺失、路径错误或版本不符（如误用 Popper 2.x），下拉将完全失效；
- 元素作为触发按钮虽可行，但推荐使用语义化 ，以保障可访问性（ARIA 支持）和默认行为稳定性。
✅ 正确写法（Bootstrap 4.6.2 + Popper 1.16.1 + jQuery 3.7.1）：
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Bootstrap Dropdown Demo</title><!-- Bootstrap CSS (CDN) --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"><div class="container mt-4"> <div class="row m-2"> <div class="col"><h2>logo</h2></div> <div class="col"> <!-- ✅ 推荐：使用 button 替代 div，并添加 type="button" 防止表单提交 --> <div class="dropdown"> <button class="btn btn-success dropdown-toggle" id="coursesDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Courses </button> <div class="dropdown-menu" aria-labelledby="coursesDropdown"> <a class="dropdown-item" href="#">A1</a> <a class="dropdown-item" href="#">A2</a> <a class="dropdown-item" href="#">B1</a> <a class="dropdown-item" href="#">B2</a> </div> </div> </div> <div class="col"><button class="btn btn-outline-dark">About me</button></div> <div class="col"><button class="btn btn-outline-dark">Contact</button></div> </div> </div> <!-- ✅ 严格按顺序加载：jQuery → Popper v1.x → Bootstrap JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>? 关键注意事项：
- Popper 版本必须为 1.x（如 1.16.1），Popper 2+ 不兼容 Bootstrap 4；若使用 Bootstrap 5，请彻底移除 jQuery 和 Popper，改用原生 ES 模块（本文适用 Bootstrap 4 场景）。
- data-toggle="dropdown" 是激活下拉的核心属性，不可遗漏；aria-haspopup 和 aria-expanded 是可访问性必需属性，强烈建议添加。
- 触发元素（按钮）与下拉菜单需在同一 .dropdown 容器内，且 aria-labelledby 值必须严格匹配触发元素的 id。
- 本地开发时，务必验证 js/ 目录下 popper.min.js 是否真实存在、是否为 v1 版本（可通过 console.log(Popper.VERSION) 检查）。
? 小结：下拉菜单失效极少因 HTML 结构错误，绝大多数源于依赖缺失或版本错配。优先使用 CDN 加载官方匹配版本，并用浏览器开发者工具检查控制台报错（如 Popper is not defined 或 jQuery is not defined），即可快速定位根源。
