navbar-toggler dont open or open and close bootstrap 5-CodePudding

this code works perfectly in https://getbootstrap.com/docs/4.1/components/navbar/ but when I copy it, the menu does not open, or it opens and closes

 <div >
  <nav >
    <a href="#" > Flavio </a>
    <button
     
     type="button"
     data-toggle ="collapse"
     data-target  = "#toggleMobileMenu"
     aria-controls = "toggleMobileMenu"
     aria-expanded = "false "
     aria-lable = "toggle navigation">
     <span ></span>
    </button>
    <div  id="toggleMobileMenu">
      <ul >
        <li>
          <a  href="#">Pricing </a>
        </li>
        <li>
          <a  href="#">Contact</a>
        </li>
        <li>
          <a  href="#">Download </a>
        </li>
      </ul>
    </div>

CodePudding user response：

Add the following links to your HTML file and it will work properly.

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

Just Like this:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div >
  <nav >
    <a href="#" > Flavio </a>
    <button
     
     type="button"
     data-toggle ="collapse"
     data-target  = "#toggleMobileMenu"
     aria-controls = "toggleMobileMenu"
     aria-expanded = "false "
     aria-lable = "toggle navigation">
     <span ></span>
    </button>
    <div  id="toggleMobileMenu">
      <ul >
        <li>
          <a  href="#">Pricing </a>
        </li>
        <li>
          <a  href="#">Contact</a>
        </li>
        <li>
          <a  href="#">Download </a>
        </li>
      </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>