不知道为什么我的可折叠导航栏不起作用答案

【问题标题】：Not sure why my collapsible navigation bar is not working不知道为什么我的可折叠导航栏不起作用
【发布时间】：2021-11-13 02:51:09
【问题描述】：

您好，我在我的网站中使用了引导程序来制作可折叠的导航栏。当我调整屏幕大小时，导航栏会折叠。但是，当我单击可折叠按钮时，导航栏不会出现在下方。

我的代码：

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
         <a class="navbar-brand" href="#">
             <img src="images/logo.jpg" alt="Logo" height="45" width="45">
         </a>
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02">
           <span class="navbar-toggler-icon"></span>
         </button>
         
         <div class="navbar-collapse collapse" id="collapsibleNavbar">
          <ul class="navbar-nav">
             <li class="nav-item"><a class="nav-link" href="#dogs">Dogs</a>
             </li>
             <li class="nav-item"><a class="nav-link" href="#cats">Cats</a>
             </li>
          </ul>
         </div>
    </nav>

我还包含了引导 cdn 链接：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

非常感谢任何帮助。

【问题讨论】：

标签： bootstrap-4 navbar

【解决方案1】：

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
         <a class="navbar-brand" href="#">
             <img src="https://source.unsplash.com/random" alt="Logo" height="45" width="45">
         </a>
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" aria-expanded="false" aria-controls="collapsibleNavbar">
           <span class="navbar-toggler-icon"></span>
         </button>
         
         <div class="navbar-collapse collapse" id="collapsibleNavbar">
          <ul class="navbar-nav">
             <li class="nav-item"><a class="nav-link" href="#dogs">Dogs</a>
             </li>
             <li class="nav-item"><a class="nav-link" href="#cats">Cats</a>
             </li>
          </ul>
         </div>
    </nav>

data-toggle 应该是您要切换的元素的 ID。

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>

【讨论】：

【解决方案2】：

代码如下：将 navbar-expand-sm 更改为 navbar-expand-lg 和 data-target="#navbarTogglerDemo02" 属性必须与 id="collapsibleNavbar" 匹配，因此将 id 更改为 id="navbarTogglerDemo02" 以下是完整代码：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> //change lg
         <a class="navbar-brand" href="#">
             <img src="images/logo.jpg" alt="Logo" height="45" width="45">
         </a>
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02">
           <span class="navbar-toggler-icon"></span>
         </button>
         
         <div class="navbar-collapse collapse" id="navbarTogglerDemo02"> //match target attribut
          <ul class="navbar-nav">
             <li class="nav-item"><a class="nav-link" href="#dogs">Dogs</a>
             </li>
             <li class="nav-item"><a class="nav-link" href="#cats">Cats</a>
             </li>
          </ul>
         </div>
    </nav>

【讨论】：