Bootstrap汉堡导航菜单在移动端无法展开问题排查求助

你遇到的汉堡菜单无法展开的问题，核心原因是缺少Bootstrap折叠组件依赖的JavaScript文件。Bootstrap的导航栏折叠功能（也就是汉堡菜单的展开/收起交互）需要两个关键文件支持：

• jQuery（Bootstrap所有JS组件的基础依赖）
• Bootstrap自身的JavaScript文件

你的代码里只引入了CSS样式表，完全没有加载这两个JS文件，所以点击汉堡按钮时没有任何交互响应。

具体修复步骤 #

1. 在页面的</body>结束标签之前，按顺序引入jQuery和Bootstrap JS文件（必须先加载jQuery，再加载Bootstrap JS，因为Bootstrap JS依赖jQuery运行）：

<!-- 引入jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 引入Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

2. 另外注意到你的代码里重复引入了Font Awesome（4.5.0和4.6.3两个版本），建议只保留一个较新的版本，避免潜在的样式冲突，比如删掉4.5.0的那一行：

<!-- 移除重复的旧版本Font Awesome -->
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> -->
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'>

修复后的完整代码示例 #

<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'>

<body>
  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <span class="sr-only">Toggle Navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand color-me" href="#home">Home</a>
      </div>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#about-me">About</a></li>
          <li><a href="#portfolio">Portfolio</a></li>
          <li><a href="##">Page 1</a></li>
          <li><a href="##">Page 2</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </div>
    </div> <!-- container -->
  </nav>

  <!-- 新增的JS文件引入 -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>

这样修改后，汉堡菜单就能正常展开和收起了。

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