Bootstrap 5.3.0+jQuery 3.7.0移动端导航菜单无法折叠求助

DevOps 小满

2026-7-5

问题修复：Bootstrap 5移动端汉堡菜单无响应

核心问题梳理

你的代码存在以下关键问题导致汉堡菜单点击无响应：

资源引入冲突：同时引入CDN和本地的Bootstrap、jQuery资源，版本不统一引发功能异常
class属性写法错误：折叠容器#collapsable-nav写了两个独立的class属性，浏览器仅识别第一个，导致collapse类未生效
过时导航栏类：使用Bootstrap 4及更早版本的navbar-default，Bootstrap 5已废弃该类
CSS媒体查询语法错误：将@media嵌套在#button选择器内部，导致桌面端汉堡按钮无法隐藏
导航列表类错误：导航列表使用navbar类而非Bootstrap 5要求的navbar-nav

修复步骤及代码调整

1. 统一资源引入

删除重复的CDN资源，确保jQuery在Bootstrap JS之前引入，版本匹配开发环境（Bootstrap 5.3.0 + jQuery 3.7.0）：

<link rel='stylesheet' href='css/bootstrap.min.css'>
<link rel='stylesheet' href='css/styles.css'>
<!-- 脚本放在body末尾 -->
<script src="js/jquery-3.7.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>

2. 修复折叠容器class属性

合并两个class属性，确保collapse类生效：

<div id="collapsable-nav" class="collapse navbar-collapse d-none d-md-block">

3. 更新导航栏类

替换过时的navbar-default为Bootstrap 5响应式导航类：

<nav id="header-nav" class="navbar navbar-expand-md navbar-light">

4. 修正CSS媒体查询语法

将嵌套的@media提取为顶级规则：

#button {
  position: absolute;
  top: 20px;
  right: 10px;
}

@media (min-width: 768px) {
  #button {
    display: none;
  }
}

5. 修正导航列表类

将navbar替换为navbar-nav，添加ms-auto实现右对齐：

<ul id="nav-list" class="navbar-nav ms-auto">

完整修复后的代码

HTML部分

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content="IE=edge">
  <title>David Chu's China</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <link rel="icon" href="images/David Chu icon.png">
  <link rel='stylesheet' href='css/bootstrap.min.css'>
  <link rel='stylesheet' href='css/styles.css'>
</head>
<body>
<header>
  <nav id="header-nav" class="navbar navbar-expand-md navbar-light">
    <div class="container" id="Navbar-1">
      <div class="navbar-header">
        <a href="Web-site(index).html" id="pqp" class="d-none d-md-block">
          <div id="logo-img" alt="Logo Image"></div>
        </a>
        <div class="navbar-brand">
          <a href="Web-site(index).html">
            <h1 style=" margin-top: 5%;">David Chu's China Bistro</h1>
          </a>
          <p>
            <img src="images/star-k-logo.png" alt="Kosher certification">
            <span>Kosher Certified</span>
          </p>
        </div>
        <div id="button">
          <button class="navbar-toggler " type="button" data-bs-toggle="collapse" data-bs-target="#collapsable-nav" aria-controls="collapsable-nav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
        </div>
      </div>
      <div id="collapsable-nav" class="collapse navbar-collapse d-none d-md-block">
        <ul id="nav-list" class="navbar-nav ms-auto">
          <li class="nav-item">
            <a href="menu-categories.html" class="nav-link">
              <img src="images/icons8-cutlery-30.png"> <br> Menu</a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link">
              <img src="images/icons8-about-30.png"><br> About</a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link">
              <img src="images/icons8-trophy-30.png"><br> Awards</a>
          </li>
          <li id="phone" class="nav-item">
            <a href="tel:410-602-5008" class="nav-link">
              <span>410-602-5008</span></a>
            <div>* We Deliver</div>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</header>

<script src="js/jquery-3.7.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>

CSS部分（修正后的关键代码）

body {
  font-size: 16px;
  color: #fff;
  background-color: #61122f;
  font-family: 'Oxygen', serif;
  overflow: auto;
}

nav a {
  text-decoration: none;
}

#header-nav {
  background-color: #f6b319;
  border-radius: 0;
  border: 0;
}

#logo-img {
  background: url('../images/restaurant-logo_large.png') no-repeat;
  width: 150px;
  height: 150px;
  margin: 10px 15px 10px 0;
}

#Navbar-1 {
  float: right;
}

#pqp {
  float: left;
}

.navbar-brand {
  padding-top: 2px;
}

.navbar-brand h1 {
  font-family: 'Lora', serif;
  color: #557c3e;
  font-size: 1.5em;
  text-transform: uppercase;
  font-weight: bold;
  text-shadow: 1px 1px 1px #222;
  margin-top: 0;
  margin-bottom: 0;
  line-height: .75;
}

.navbar-brand p {
  color: #000;
  text-transform: uppercase;
  font-size: .7em;
  margin-top: 15px;
}

.navbar-brand p span {
  vertical-align: middle;
}

#button {
  position: absolute;
  top: 20px;
  right: 10px;
}

@media (min-width: 768px) {
  #button {
    display: none;
  }
}

#nav-list {
  list-style: none;
}

#nav-list a {
  color: #951C49;
  text-align: center;
  margin-right: 15px;
}

div>ul>li>a:hover {
  display: block;
  background-color: #fff;
}

#nav-list a span {
  font-size: 1.8em;
}

#phone {
  margin-top: 5px;
}

#phone a {
  text-align: right;
  padding-bottom: 0;
}

#phone div {
  color: #557c3e;
  text-align: right;
  font-size: larger;
  padding-right: 15px;
}

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