Bootstrap下拉菜单点击无列表项显示问题求助

云上老周

2026-7-10

问题排查与解决方案

问题原因

JS脚本加载失败：你使用的jQuery和Bootstrap JS的integrity哈希是无效的乱码，浏览器校验不通过会拒绝加载这些脚本，而Bootstrap的下拉交互完全依赖这些JS驱动，直接导致功能失效。
版本类混用：导航栏用了Bootstrap 3的navbar-default类，和Bootstrap 4的组件不兼容，会引发布局或交互异常。
遗漏核心依赖：Bootstrap 4的下拉菜单需要Popper.js处理弹出位置，你之前没引入这个库，也是功能失效的关键原因。
层级遮挡问题：固定顶部的导航栏，下拉菜单默认层级可能不足，会被下方内容覆盖。

解决方案

1. 替换为正确的JS资源链接

使用Bootstrap 4.3.1官方推荐的CDN链接，确保脚本正常加载（包含必须的Popper.js）：

<!-- 正确引入依赖脚本 -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

2. 修正导航栏的Bootstrap 4类

把Bootstrap 3的navbar-default替换为Bootstrap 4的标准类，同时添加响应式折叠容器，确保下拉按钮在移动端正常显示：

<nav id="header-nav" class="navbar navbar-dark navbar-expand-lg navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-brand">
      <h1>Food, LLC</h1>
    </div>
    <!-- 响应式折叠按钮 -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMenu" aria-controls="navbarMenu" aria-expanded="false" aria-label="Toggle navigation">
      <i class="fas fa-bars"></i>
    </button>
    <div class="collapse navbar-collapse" id="navbarMenu">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="menuDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Menu
          </a>
          <div class="dropdown-menu" aria-labelledby="menuDropdown">
            <a class="dropdown-item" href="#Box1">Chicken</a>
            <a class="dropdown-item" href="#Box2">Beef</a>
            <a class="dropdown-item" href="#Box3">Sushi</a>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>

3. 调整CSS解决遮挡与样式问题

修正导航栏边框写法，提升下拉菜单层级，同时适配移动端宽度：

#header-nav {
  background-color: grey;
  box-sizing: border-box;
  border-bottom: 10px solid black; /* 修正边框写法 */
  z-index: 1030; /* 确保导航栏层级足够 */
}

.dropdown-menu {
  z-index: 1040; /* 下拉菜单层级高于导航栏，避免被遮挡 */
}

/* 移动端下拉菜单占满宽度 */
@media (max-width: 991px) {
  .dropdown-menu {
    width: 100%;
    background-color: blueviolet;
  }
}

/* 给主标题添加上边距，避免被固定导航栏遮挡 */
h1.text-center {
  margin-top: 80px;
}

完整修正后的HTML代码

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=Oxygen:400,300,700" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="css/style.css">
  <title>Our Menu</title>
</head>
<body>
  <header>
    <nav id="header-nav" class="navbar navbar-dark navbar-expand-lg navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-brand">
          <h1>Food, LLC</h1>
        </div>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMenu" aria-controls="navbarMenu" aria-expanded="false" aria-label="Toggle navigation">
          <i class="fas fa-bars"></i>
        </button>
        <div class="collapse navbar-collapse" id="navbarMenu">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="menuDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Menu
              </a>
              <div class="dropdown-menu" aria-labelledby="menuDropdown">
                <a class="dropdown-item" href="#Box1">Chicken</a>
                <a class="dropdown-item" href="#Box2">Beef</a>
                <a class="dropdown-item" href="#Box3">Sushi</a>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </header>

  <h1 class="text-center">Our Menu</h1>
  <div id="Box1" class="container mb-4">
    <h2 class="text-center">Chicken</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div id="Box2" class="container mb-4">
    <h2 class="text-center">Beef</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div id="Box3" class="container">
    <h2 class="text-center">Sushi</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>

  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

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

Bootstrap下拉菜单点击无列表项显示问题求助

问题原因 #

解决方案 #

1. 替换为正确的JS资源链接 #

2. 修正导航栏的Bootstrap 4类 #

3. 调整CSS解决遮挡与样式问题 #