Bootstrap 3.4.1搭配jQuery≥3.0.0时下拉菜单失效问题求助

我之前也碰到过一模一样的情况——Bootstrap 3.4.1明明标注兼容jQuery 3.x，但把jQuery从2.x升级到3.x后，下拉菜单直接罢工了。结合你给出的HTML代码（结构完全没问题），我给你梳理几个最可能的原因和解决办法：

1. 先确认脚本加载顺序是否正确 #

这是最容易被忽略的点：必须先加载jQuery，再加载Bootstrap的JS文件，最后加载你的自定义脚本。如果顺序搞反了，Bootstrap没法绑定jQuery的方法，下拉菜单自然触发不了。

比如正确的加载顺序应该是：

<script src="jquery-3.4.1.min.js"></script>
<script src="bootstrap.min.js"></script>
<!-- 你的其他自定义JS放在后面 -->

2. 手动初始化下拉菜单组件 #

jQuery 3.x对DOM加载的处理和2.x略有不同，有时候Bootstrap的自动初始化（针对带data-toggle属性的元素）会失效。你可以手动触发初始化，确保组件正常工作：

在你的自定义JS里添加这段代码：

$(document).ready(function() {
    // 手动初始化所有下拉菜单
    $('.dropdown-toggle').dropdown();
});

3. 排查自定义脚本或第三方插件的冲突 #

jQuery 3.x废弃了.bind()、.unbind()、.live()这些旧方法，如果你的项目里有自定义脚本或者其他第三方插件还在使用这些方法，会干扰Bootstrap的事件绑定，导致下拉菜单失效。

解决步骤：

• 暂时注释掉所有非必要的自定义JS和第三方插件，测试下拉菜单是否恢复正常。
• 如果恢复了，再逐个恢复脚本，找到冲突的那个，把旧的事件方法替换成jQuery 3.x支持的.on()和.off()。

比如把：

$('.dropdown-toggle').bind('click', function() { ... });

改成：

$('.dropdown-toggle').on('click', function() { ... });

4. 检查Bootstrap版本的兼容性细节 #

虽然Bootstrap 3.4.1宣称兼容jQuery 3.x，但有些边缘场景下还是会有小问题。建议你确保使用的是官方发布的最新Bootstrap 3.4.1版本，避免使用修改过的或者缓存的旧版本。

内容的提问来源于stack exchange，提问作者Ben Junior