Bootstrap dropdown menu is not working[HTML]-CodePudding

i download bootstrap and added the scripts in my code, but don't know why. Everythig works fine, no error in console ,but a drop-down menu is not working ... what is the problem?

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="text/javascript" href="./assets/js/bootstrap.min.js">
    <link rel="stylesheet" href="./assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="./assets/css/style.css">

    
    <meta charset="utf-8">
</head>
<nav >
  <a  href="#">Navbar</a>
  <button  type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span ></span>
  </button>
  <div  id="navbarNavDropdown">
    <ul >
      <li >
        <a  href="#">Home <span >(current)</span></a>
      </li>
      <li >
        <a  href="#">Features</a>
      </li>
      <li >
        <a  href="#">Pricing</a>
      </li>
      <li >
        <a  href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div  aria-labelledby="navbarDropdownMenuLink">
          <a  href="#">Action</a>
          <a  href="#">Another action</a>
          <a  href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

CodePudding user response：

It seems you almost got it right!

you have data-toggle it needs to be data-bs-toggle

that should fix it!

<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

    
    <meta charset="utf-8">
</head>
<nav >
  <a  href="#">Navbar</a>
  <button  type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span ></span>
  </button>
  <div  id="navbarNavDropdown">
    <ul >
      <li >
        <a  href="#">Home <span >(current)</span></a>
      </li>
      <li >
        <a  href="#">Features</a>
      </li>
      <li >
        <a  href="#">Pricing</a>
      </li>
      <li >
        <a  href="#" id="navbarDropdownMenuLink" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div  aria-labelledby="navbarDropdownMenuLink">
          <a  href="#">Action</a>
          <a  href="#">Another action</a>
          <a  href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

CodePudding user response：

If you are using bootstrap version 4.XX, I have created sample working html content for you. You can find the point where you made a mistake by comparing your code with the example.

Example Code:

<!DOCTYPE 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>Document</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
        integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
</head>

<body>
    <nav >
        <a  href="#">Navbar</a>
        <button  type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
            aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span ></span>
        </button>
        <div  id="navbarNavDropdown">
            <ul >
                <li >
                    <a  href="#">Home <span >(current)</span></a>
                </li>
                <li >
                    <a  href="#">Features</a>
                </li>
                <li >
                    <a  href="#">Pricing</a>
                </li>
                <li >
                    <a  href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false">
                        Dropdown link
                    </a>
                    <div  aria-labelledby="navbarDropdownMenuLink">
                        <a  href="#">Action</a>
                        <a  href="#">Another action</a>
                        <a  href="#">Something else here</a>
                    </div>
                </li>
            </ul>
        </div>
    </nav>

    <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>
    <meta charset="utf-8">
</body>

</html>