小设备上Bootstrap折叠导航栏按钮失效问题求助

问题描述 #

网站使用Bootstrap折叠导航栏，小设备上点击折叠按钮无反应，其他功能正常。

问题分析 #

从提供的HTML代码来看，有两个关键问题导致该现象：

1. 导航链接被强制隐藏：所有导航链接都添加了d-none d-md-inline-block类，d-none会让元素在所有屏幕尺寸下隐藏，d-md-inline-block仅在中等屏幕（≥768px）及以上恢复显示。这意味着即使折叠菜单成功展开，小屏幕用户也看不到任何导航链接，误以为按钮没反应。
2. 重复引入jQuery：页面头部和底部各引入了一次jQuery，虽然Bootstrap 5不再依赖jQuery，但重复引入可能引发潜在冲突。

修复步骤 #

1. 调整导航链接的显示类
   移除d-none类，保留d-md-inline-block（或根据需求改为d-block），确保小屏幕下展开菜单后能看到导航链接。修改后的导航链接代码如下：

   <li class="nav-item">
     <a class="nav-link py-1 d-md-inline-block active" href="#home">Home</a>
   </li>
   <li class="nav-item">
     <a class="nav-link py-1 d-md-inline-block" href="#skills">Skills</a>
   </li>
   <li class="nav-item">
     <a class="nav-link py-1 d-md-inline-block" href="#projects">Projects</a>
   </li>
   <li class="nav-item">
     <a class="nav-link py-1 d-md-inline-block" href="#about">About</a>
   </li>
   

2. 移除重复的jQuery引入
   删除头部或底部的其中一个jQuery引入代码，推荐直接删除所有jQuery（因为Bootstrap 5不需要它）。

完整修复后的HTML代码示例 #

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Impressions</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
  
  <nav id="navbar" class="navbar fixed-top navbar-custom navbar-expand-sm">
    <div class="container-fluid">
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav mx-auto mr-auto">
          <li class="nav-item">
            <a class="nav-link py-1 d-md-inline-block active" href="#home">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link py-1 d-md-inline-block" href="#skills">Skills</a>
          </li>
          <li class="nav-item">
            <a class="nav-link py-1 d-md-inline-block" href="#projects">Projects</a>
          </li>
          <li class="nav-item">
            <a class="nav-link py-1 d-md-inline-block" href="#about">About</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  
  <!-- JavaScript Bundle with Popper -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>

  <script src="index.js"charset="UTF-8"></script>

</body>
</html>

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