My bootstrap 4 dropdown doesn't work and I'm not sure how to resolve it-CodePudding

I'm very new to HTML and have been struggling to get my dropdown to work for a few hours now. I've searched many posts facing similar issues but I still can't find and resolve the issue. I'm unsure if the issue is caused by my scripts as well

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleleapis.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>

<header >
  <a  href="#" id="logo">Logo</a>
  <button  type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
        <span ></span>
        </button>

  <nav  id="navbarSupportedContent">
    <ul >
      <li ><a  href="#">Home <span >(current)</span></a></li>
      <li ><a  href="#">Link</a></li>
      <li >
        <div >
          <a href="#"  id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
          <div  aria-labelledby="navbarDropdown">
            <a href="#" >Action</a>
            <a href="#" >Another action</a>
            <div ></div>
            <a href="#" >Something else here</a>
          </div>
        </div>
      </li>
      <li ><a  href="#">Disabled</a></li>
    </ul>
  </nav>
</header>

Thanks in advance!

I tried replacing data-toggle="dropdown" with data-bs-toggle="dropdown" but it didn't work since I'm using bootstrap 4, copied and pasted the codes directly from bootstrap and it still failed

CodePudding user response：

The CDN isn't working for your jQuery. Bootstrap needs this to run. You get a clue for this in your console, there should be an error saying that it needed jQuery. So you can:

Replace this

https://ajax.googleleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js

With this

https://code.jquery.com/jquery-3.6.1.min.js

CodePudding user response：

You need to add bootstrap jQuery

use this code snippet for done

HTML Code

<!doctype html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

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

        <title>Hello, world!</title>
    </head>

    <body>
        <nav >
            <a  href="#">Navbar</a>
            <button  type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span ></span>
            </button>

            <div  id="navbarSupportedContent">
                <ul >
                    <li >
                        <a  href="#">Home <span >(current)</span></a>
                    </li>
                    <li >
                        <a  href="#">Link</a>
                    </li>
                    <li >
                        <a  href="#" id="navbarDropdown" role="button"
                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Dropdown
                        </a>
                        <div  aria-labelledby="navbarDropdown">
                            <a  href="#">Action</a>
                            <a  href="#">Another action</a>
                            <div ></div>
                            <a  href="#">Something else here</a>
                        </div>
                    </li>
                    <li >
                        <a  href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                    </li>
                </ul>
                <form >
                    <input  type="search" placeholder="Search" aria-label="Search">
                    <button  type="submit">Search</button>
                </form>
            </div>
        </nav>


        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    </body>
</html>