为什么点击按钮时Bootstrap的navbar导航栏无法触发折叠切换？

核心故障原因及修复方法 #

• 脚本加载逻辑错误
  你给jQuery引入标签添加了defer属性，该属性会让jQuery的加载和执行延迟到DOM解析完成后，而后续的Bootstrap JS没有添加defer属性，会优先执行。Bootstrap JS依赖jQuery环境，执行时jQuery还未加载完成，导致折叠功能初始化失败。
  修复方式：删除jQuery引入标签的defer属性，保证jQuery在Bootstrap JS之前加载执行，修改后的脚本引入顺序如下：

<script src="../js/someJavaScript.js"></script>
<script class="script" type="text/javascript" src="../js/jquery.js"></script>
<script src="../vendor/bootstrap/js/bootstrap.js"></script>

• 自定义CSS规则与Bootstrap版本不兼容
  你使用的是Bootstrap v4.3.1，该版本折叠导航展开时会给目标元素添加show类，而非旧版Bootstrap3的in类。你写的自定义媒体查询规则中，针对.in类的显示逻辑完全不会触发，同时你强制给.navbar-collapse.collapse添加了display: none !important规则，即便Bootstrap触发了展开逻辑，也会被你的自定义规则覆盖。
  修复方式：要么删除@media(max-width:835px)下所有和折叠显示相关的自定义规则（Bootstrap本身已经自带完整的响应式折叠逻辑，不需要额外手动实现），要么将该规则下所有的.in类替换为.show类：

@media(max-width:835px) {
    .navbar-collapse.collapse {
        display: none !important;
    }
    .navbar-collapse.collapse.show {
        display: block !important;
    }
    /* 其余规则按需保留 */
}

• 可选修复：导航栏类名错误
  导航栏根元素的class属性多写了无效的navbarnavbar-default字符串，建议修正为：

<div class="navbar navbar-expand-md navbar-dark bg-dark">

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