Bootstrap 4 dropdown works only once-CodePudding

i'm trying to make a dropdown with bootstrap 4. it works, but the problem is that it toggles only once. Also, I've tried solutions suggested on the site, but any of them could help me. Here's my code:

  <button  type="button" id="dropdownMenu1" data-toggle="dropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
    <span ></span>
  </button>
  <ul  aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" ></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

CodePudding user response：

Try with code here working fine I think you missing adding some bootstrap .js or .css

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

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

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

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

<body>
    <button  type="button" id="dropdownMenu1" data-toggle="dropdown"
        data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown
        <span ></span>
    </button>
    <ul  aria-labelledby="dropdownMenu1">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" ></li>
        <li><a href="#">Separated link</a></li>
    </ul>
    </div>


    <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>