导航栏切换器不打开或打开和关闭 bootstrap 5

Question

这段代码在https://getbootstrap.com/docs/4.1/components/navbar/中完美运行，但是当我复制它时，菜单打不开，或者打开又关闭

 <div class="container">
  <nav class="navbar navbar-expand-md navbar-light">
    <a href="#" class="navbar-brand"> Flavio </a>
    <button
     class="navbar-toggler"
     type="button"
     data-toggle ="collapse"
     data-target  = "#toggleMobileMenu"
     aria-controls = "toggleMobileMenu"
     aria-expanded = "false "
     aria-lable = "toggle navigation">
     <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="toggleMobileMenu">
      <ul class="navbar-nav">
        <li>
          <a class="nav-link" href="#">Pricing </a>
        </li>
        <li>
          <a class="nav-link" href="#">Contact</a>
        </li>
        <li>
          <a class="nav-link" href="#">Download </a>
        </li>
      </ul>
    </div>

Answer 1

将以下链接添加到您的 HTML 文件，它将正常工作。

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

就像这样：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="container">
  <nav class="navbar navbar-expand-md navbar-light">
    <a href="#" class="navbar-brand"> Flavio </a>
    <button
     class="navbar-toggler"
     type="button"
     data-toggle ="collapse"
     data-target  = "#toggleMobileMenu"
     aria-controls = "toggleMobileMenu"
     aria-expanded = "false "
     aria-lable = "toggle navigation">
     <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="toggleMobileMenu">
      <ul class="navbar-nav">
        <li>
          <a class="nav-link" href="#">Pricing </a>
        </li>
        <li>
          <a class="nav-link" href="#">Contact</a>
        </li>
        <li>
          <a class="nav-link" href="#">Download </a>
        </li>
      </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

导航栏切换器不打开或打开和关闭 bootstrap 5

navbar-toggler dont open or open and close bootstrap 5

twitter-bootstrap

bootstrap-5