我的切换器不工作。我试过将 js cdn 放在顶部和底部，但没有用

Question

I tried placing the js cdn in top and it did not work.我尝试将 js cdn 放在顶部，但它没有用。 I was trying to make my navbar responsive and used toggler.我试图让我的导航栏响应并使用切换器。 The navbar became responsive but the toggler button is not working.导航栏变得有响应，但切换器按钮不起作用。

Here is my code, the hamburger menu is not working:这是我的代码，汉堡菜单不起作用：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>TinDog</title>
  <!-- Latest compiled and minified CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">

  <!-- Latest compiled JavaScript -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="css/styles.css">
</head>

<body>
  <section id="title">
    <!-- Nav Bar -->
    <nav class="navbar bg-dark navbar-expand-lg navbar-dark">
      <a class="navbar-brand" href="">Tindog</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="NssavbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item">
            <a class="nav-link" href="">Contact</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="">Pricing</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="">Download</a>
          </li>
        </ul>
      </div>
    </nav>
   </section>
 </body>
</html>

Answer 1

For Bootstrap V5 it's data-bs-toggle not data-toggle , plus you needed a "#" to point the target to an ID not a class.对于 Bootstrap V5，它是data-bs-toggle而不是data-toggle ，而且您需要一个“#”来将目标指向一个 ID 而不是一个类。 Lastly you had a typo "NssavbarSupportedContent" should be "navbarSupportedContent".最后你有一个错字“NssavbarSupportedContent”应该是“navbarSupportedContent”。

 <:DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>TinDog</title> <.-- Latest compiled and minified CSS --> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap:min.css" rel="stylesheet"> <.-- Latest compiled JavaScript --> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <link rel="stylesheet" href="css/styles.css"> </head> <body> <section id="title"> <!-- Nav Bar --> <nav class="navbar bg-dark navbar-expand-lg navbar-dark"> <a class="navbar-brand" href="">Tindog</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ms-auto"> <li class="nav-item"> <a class="nav-link" href="">Contact</a> </li> <li class="nav-item"> <a class="nav-link" href="">Pricing</a> </li> <li class="nav-item"> <a class="nav-link" href="">Download</a> </li> </ul> </div> </nav> </section> </body> </html>

我的切换器不工作。我试过将 js cdn 放在顶部和底部，但没有用

问题描述

1 个解决方案

解决方案1
0 2022-12-21 16:57:54

我的切换器不工作。 我试过将 js cdn 放在顶部和底部，但没有用

问题描述

1 个解决方案

解决方案1 0 2022-12-21 16:57:54

我的切换器不工作。我试过将 js cdn 放在顶部和底部，但没有用

解决方案1
0 2022-12-21 16:57:54