为什么已引入相关依赖的Bootstrap 4下拉菜单无法正常工作？

排查解决方法 #

1. 补全依赖并调整引入顺序

Bootstrap 4的下拉组件必须依赖Popper.js，你目前的依赖列表里缺少这个资源，直接会导致下拉无法触发。
同时所有JS依赖必须严格按照以下顺序引入，顺序错误也会导致功能失效：

• 第一步引入jquery
• 第二步引入popper.js
• 第三步引入util.js
• 第四步引入bootstrap.js
  CSS文件正常放在页面头部引入即可，顺序不影响功能运行。

2. 确认jQuery版本符合要求

Bootstrap 4要求jQuery版本≥3.0.0，如果你引入的是2.x及更低版本的jQuery，也会出现组件无法初始化的问题。

3. 动态渲染DOM需手动初始化

如果你这段下拉代码是页面加载完成后，通过JS动态插入到页面中的，需要额外执行初始化代码：

$('.dropdown-toggle').dropdown()

4. 排查jQuery引入冲突

如果页面中存在多次引入不同版本jQuery的情况，会导致Bootstrap绑定的jQuery实例被覆盖，也会出现功能失效，确保全局只引入一次符合版本要求的jQuery即可。

内容的提问来源于stack exchange，提问作者Bea Lovelace