Bootstrap 5开始不再依赖jQuery，很多小伙伴升级或调整项目时，会遇到下拉菜单、模态框这类交互插件突然失效的问题，尤其是之前习惯用Bootstrap4 + jQuery的开发者，删了jQuery后，插件直接“罢工”，接下来我们一步步拆解这个问题，从原因到解决方法，再到注意事项，帮大家彻底搞定。
一、问题的具体表现
很多人遇到的核心症状是：点击按钮没反应，下拉菜单弹不出来，模态框点了没动静，或者选项卡切换失效，而且打开浏览器控制台一看，大概率会出现“$ is not defined”或者“jQuery is not defined”的报错——这其实就是jQuery依赖被移除后，原有插件找不到依赖的资源了。
1.1 典型踩坑场景
举个最常见的例子：之前项目用Bootstrap4，引入了jQuery、Bootstrap的CSS和JS，后来觉得jQuery占空间，想删掉，只留Bootstrap5，结果删完jQuery后，下拉菜单点了没反应，模态框也打不开。这就是因为Bootstrap4的JS是直接套在jQuery的fn方法里的，没有jQuery就调用不了这些方法，自然失效。
二、为什么会失效？
其实核心原因是Bootstrap版本升级后，底层实现逻辑变了。Bootstrap4的交互插件（下拉、模态、选项卡等）完全基于jQuery的DOM操作和事件系统，相当于把jQuery的功能封装成了自己的插件；而Bootstrap5把这些全部换成了原生JavaScript的API，比如用addEventListener绑事件，用classList管理类名，完全脱离了jQuery。
2.1 新旧版本的核心差异
简单说：Bootstrap4的插件需要jQuery当“底座”，没有底座就跑不起来；Bootstrap5把底座换成了原生JS，不需要任何额外依赖（除了Popper，用来做弹窗定位，Bootstrap.bundle已经集成了），所以只要用对Bootstrap5的插件写法，完全不用jQuery也能正常运行。
三、具体的解决方法
针对刚才的踩坑场景，我们整理了三种最实用的解决方式，从简单到复杂，大家可以根据项目情况选。
3.1 直接替换为Bootstrap5的完整资源
这是最简单的方法，适合想彻底移除jQuery的项目，步骤几乎没成本：
- 删掉项目里所有jQuery的引入代码；
- 把原来的Bootstrap4的CSS/JS，换成Bootstrap5的CDN资源；
- 测试插件是否正常。
示例：Bootstrap5无jQuery的完整代码
<!-- 技术栈：HTML + Bootstrap5 + 原生JS（无jQuery） -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<!-- 适配移动端视口 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap5的CSS，无需依赖jQuery -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Bootstrap5无jQuery示例</title>
</head>
<body>
<!-- 下拉菜单示例：用Bootstrap5专属的data-bs-toggle属性 -->
<div class="dropdown mt-5 ms-5">
<button class="btn btn-primary dropdown-toggle" type="button"
id="dropdownBtn" data-bs-toggle="dropdown" aria-expanded="false">
点击下拉
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownBtn">
<li><a class="dropdown-item" href="#">选项一</a></li>
<li><a class="dropdown-item" href="#">选项二</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">选项三</a></li>
</ul>
</div>
<!-- Bootstrap5的JS：bundle版本已集成Popper，不需要额外引入 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
这个示例直接用Bootstrap5的原生写法，没有jQuery，打开后下拉菜单正常点击，完全没问题。
3.2 修正自定义插件的事件绑定
如果你的项目里写了自己的小插件，之前用了jQuery的写法，现在需要换成原生JS的写法，比如原来的$('.btn').click(fn)要改成原生的事件绑定：
// 示例：把jQuery点击事件换成原生JS写法
// 原jQuery写法（需jQuery）：
// $('.custom-btn').on('click', function() {
// console.log('按钮被点击了');
// });
// 替换后的原生JS写法（无依赖）：
// 找到所有自定义按钮
const customBtns = document.querySelectorAll('.custom-btn');
// 给每个按钮绑定点击事件
customBtns.forEach(btn => {
btn.addEventListener('click', function() {
console.log('按钮被点击了');
// 这里可以加你的业务逻辑
});
});
这个替换过程很简单，只要把jQuery的选择器和事件方法，换成原生的DOM API和事件方法就行，没有学习成本。
3.3 封装简易原生交互插件
如果不想完全替换Bootstrap，只想保留部分功能，也可以自己用原生JS封装简单的下拉、弹窗，避免依赖：
// 示例：原生JS封装简易下拉菜单插件（无依赖）
class SimpleDropdown {
constructor(triggerEl, menuEl) {
this.trigger = triggerEl; // 触发按钮元素
this.menu = menuEl; // 下拉菜单元素
this.isOpen = false; // 初始关闭状态
// 绑定点击事件到触发按钮
this.bindEvents();
}
bindEvents() {
// 点击触发按钮切换菜单显示
this.trigger.addEventListener('click', (e) => {
e.stopPropagation(); // 阻止冒泡，避免点击页面其他地方关闭
this.toggle();
});
// 点击页面其他地方关闭菜单
document.addEventListener('click', () => {
if (this.isOpen) this.close();
});
}
toggle() {
this.isOpen ? this.close() : this.open();
}
open() {
this.menu.style.display = 'block';
this.isOpen = true;
}
close() {
this.menu.style.display = 'none';
this.isOpen = false;
}
}
// 使用插件：找到页面里的下拉元素，实例化插件
const dropdownTrigger = document.getElementById('customDropdownBtn');
const dropdownMenu = document.getElementById('customDropdownMenu');
new SimpleDropdown(dropdownTrigger, dropdownMenu);
这个原生封装的下拉菜单，不需要任何依赖，运行起来和Bootstrap的下拉功能一样，适合小项目或者只想精简部分功能的场景。
四、应用场景与技术分析
4.1 适用场景
这种“移除jQuery，用Bootstrap5原生交互”的方案，最适合两类场景：一是移动端优先的项目，需要减少页面加载体积，jQuery压缩后约30KB，Bootstrap5的JS压缩后仅10KB左右，去掉jQuery能明显提升加载速度；二是轻量小项目，不想维护多余的依赖，降低项目复杂度，比如个人博客、小型工具网站等。
4.2 技术优缺点
优点很明显：一是减小项目体积，提升页面性能，尤其是在网络差的移动端，加载速度提升很直观；二是标准性，原生JS是前端的标准，没有jQuery全局命名冲突的问题，也不会因为jQuery版本差异出现兼容问题；三是轻量化，Bootstrap5的JS只有核心功能，没有多余的代码。 缺点也存在：一是旧项目迁移成本，如果你之前写了大量依赖jQuery的自定义脚本，替换起来需要不少工作量；二是学习成本，对于只会用jQuery的新手，原生JS的写法需要适应，但其实变化并不大，只要掌握了DOM API的基本用法，很快就能上手。
4.3 注意事项
有几个细节一定要注意，不然还是会踩坑：一是Bootstrap5的属性名变了，比如原来的data-toggle要换成data-bs-toggle，data-target换成data-bs-target，这是最容易错的地方；二是Bootstrap5的JS要加载完整的bootstrap.bundle.min.js，这个包已经集成了Popper，不需要额外引入，不然下拉菜单、弹窗的定位会失效；三是原生事件绑定要注意阻止冒泡，不然点击下拉菜单后，会触发页面的点击事件，导致菜单自动关闭。
五、总结
遇到Bootstrap移除jQuery依赖后插件失效的问题，核心就是没跟上版本变化：Bootstrap5把依赖换成了原生JS，只要我们把jQuery的写法换成原生的，或者直接用Bootstrap5的新资源，就能轻松解决。这个方案能帮我们精简项目，提升性能，适合大多数想优化前端的开发者，只要注意属性名和资源引入的细节，就能顺利落地。
评论
围绕“Bootstrap移除jQuery依赖后JS插件交互失效的问题解决”参与讨论