Bootstrap v3.4.1导航栏折叠切换按钮点击无响应无法展开

核心触发问题 #

• 多版本jQuery重复加载：页面先后引入了4份不同来源的jQuery文件，后加载的脚本会直接覆盖全局$对象，导致前序脚本绑定的折叠事件监听器全部丢失
• Bootstrap脚本重复注册：同时加载了CDN版完整Bootstrap JS、本地完整版Bootstrap JS、十几个拆分的Bootstrap单组件脚本，重复绑定的collapse组件逻辑会互相覆盖，导致点击按钮时的事件触发失效
• 版本不匹配：项目标称使用Bootstrap v3.4.1，但实际引入的资源多为3.3.7版本，组件逻辑和DOM选择规则存在兼容偏差
• HTML属性错配：折叠按钮的data-target属性值为#header-menu，但实际导航可折叠容器的id为#navbar，选择器无法匹配到目标元素，即使JS加载正常也无法触发展开操作
• 无效类名干扰：导航标签上添加了Bootstrap 4专属的navbar-expand-lg类，该类在Bootstrap 3体系中无对应逻辑，会干扰响应式导航的样式判定

可直接落地的修复步骤 #

• 清理冗余引入：全项目仅保留单份jQuery文件、单份Bootstrap核心JS文件，按照「jQuery → Bootstrap核心JS → 业务依赖脚本」的顺序加载，删除所有重复的、来源混乱的冗余脚本
• 修正DOM属性：将折叠按钮的data-target值修改为#navbar，和实际可折叠容器的id保持一致；移除导航标签上的navbar-expand-lg类；删除下拉菜单上静态写死的open类，由组件逻辑自动控制展开状态
• 样式排查：检查自定义CSS是否将.navbar-toggle元素设置为display: none，这是最初切换按钮完全消失的常见诱因；排查是否有自定义脚本在按钮点击事件上阻断了默认行为或冒泡逻辑

内容的提问来源于stack exchange，提问作者Nissi Design