Bootstrap导航栏切换按钮失效问题求助

嘿，我看了你折腾了几周的这个菜单问题，这大概率是Bootstrap版本冲突+脚本加载顺序错误导致的，咱们一步步把它搞定：

问题根源分析 #

你的代码里有几个关键问题，直接导致了折叠功能失效：

1. 多版本Bootstrap冲突：同时引入了Bootstrap 3.3.7的CDN资源和本地的Bootstrap/MDB文件，Bootstrap 3和基于Bootstrap 4的MDB在类名、JS逻辑上完全不兼容，折叠按钮的点击事件直接被搞乱了。
2. 脚本加载顺序错误：Bootstrap的JS完全依赖JQuery，但你先加载了Bootstrap 3的JS，之后才加载JQuery，这就像先开汽车再装发动机，功能根本初始化不起来。
3. 混合类名导致样式异常：比如navbar-expand-lg是Bootstrap 4的类，却和Bootstrap 3的结构混用，导致移动端菜单默认状态异常。

修复后的完整代码 #

我帮你整理了修正后的代码，解决了所有问题：

<head> 
  <meta charset="utf-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
  <meta http-equiv="x-ua-compatible" content="ie=edge"> 
  <title>WEBPAGE</title> 

  <!-- Font Awesome --> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
  <!-- Bootstrap core CSS --> 
  <link href="css/bootstrap.min.css" rel="stylesheet"> 
  <!-- Material Design Bootstrap --> 
  <link href="css/mdb.min.css" rel="stylesheet"> 
  <!-- Custom styles --> 
  <link href="css/style.css" rel="stylesheet"> 

  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> 
  <link rel="icon" href="favicon.ico" type="image/x-icon"> 
</head> 

<body> 
  <!--Main Navigation--> 
  <header> 
    <nav class="navbar fixed-top navbar-expand-lg navbar-dark scrolling-navbar"> 
      <a class="navbar-brand bg-dark" href="#"><strong>NAME</strong></a> 
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
        <span class="navbar-toggler-icon"></span> 
      </button> 
      <div id="navbarSupportedContent" class="collapse navbar-collapse d-flex justify-content-between"> 
        <ul class="navbar-nav navbar-right"> 
          <li class="nav-item active"> 
            <a class="nav-link text-dark" href="#">HOME <span class="sr-only">(current)</span></a> 
          </li> 
          <li class="nav-item"> 
            <a class="nav-link text-dark" href="#">OPTION1</a> 
          </li> 
          <li class="nav-item"> 
            <a class="nav-link text-dark" href="#">OPTION2</a> 
          </li> 
          <li class="nav-item"> 
            <a class="nav-link text-dark" href="#">OPTION3</a> 
          </li> 
          <li class="nav-item"> 
            <a class="nav-link text-dark" href="#">OPTION4</a> 
          </li> 
          <li class="nav-item"> 
            <a class="nav-link text-dark" href="#">OPTION5</a> 
          </li> 
          <li class="nav-item"> 
            <a class="nav-link text-dark" href="#">OPTION6</a> 
          </li> 
        </ul> 
      </div> 
    </nav> 
  </header> 

  <!-- SCRIPTS --> 
  <!-- JQuery 必须最先加载 --> 
  <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> 
  <!-- Bootstrap tooltips --> 
  <script type="text/javascript" src="js/popper.min.js"></script> 
  <!-- Bootstrap core JavaScript --> 
  <script type="text/javascript" src="js/bootstrap.min.js"></script> 
  <!-- MDB core JavaScript --> 
  <script type="text/javascript" src="js/mdb.min.js"></script> 
</body>

关键修复点说明 #

• 清理重复资源：删掉了Bootstrap 3.3.7的CDN链接，只保留本地的Bootstrap+MDB，确保版本匹配。
• 修正加载顺序：把JQuery放在所有JS的最前面，保证Bootstrap能正常初始化依赖。
• 修复结构问题：补上了之前缺失的<ul>闭合标签，移除了多余的navi类，确保折叠容器的类名正确。
• 默认收起逻辑：navbar-expand-lg会自动在屏幕宽度小于992px（lg断点）时折叠菜单，默认状态就是收起的，点击按钮就能正常切换展开/收起。

你把代码替换成上面的版本，再测试一下，移动端的菜单应该就能正常工作了！

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