I couldn't run my "dropdown" command. "When you press the button, the links shou-CodePudding

When I pressed the dropdown button, the links were supposed to be sorted one after the other. But I could not. I am using Bootstrap. I'm almost new to software by the way. It may be an easy question.

    <button  data-toggle="dropdown">
        Dropdown button
    </button>

    <div >
        <a href="#" >Link 1</a>
        <a href="#" >Link 2</a>
        <a href="#" >Link 3</a>
    </div>

</div>


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
    crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
    integrity="sha384-Xe 8cL9oJa6tN/veChSP7q mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk"
    crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
    integrity="sha384-ODmDIVzN pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK"
    crossorigin="anonymous"></script>

CodePudding user response：

You need to include "popper.js" library. It's what bootstrap uses for dropdown mechanism if i've researched correct. So this code works;

<!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"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
    crossorigin="anonymous"
  />

  <title>Hello, world!</title>
</head>
<body>
  <h1>Hello, world!</h1>
  <div >
    <button  data-bs-toggle="dropdown">
      Dropdown button
    </button>
    <div >
      <a href="#" >Link 1</a>
      <a href="#" >Link 2</a>
      <a href="#" >Link 3</a>
    </div>
  </div>
</body>
<script
  src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
  integrity="sha384-Xe 8cL9oJa6tN/veChSP7q mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk"
  crossorigin="anonymous"
></script>
<script
  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
  integrity="sha384-ODmDIVzN pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK"
  crossorigin="anonymous"
></script>
</html>

CodePudding user response：

Just add the data-bs-toggle="dropdown" attribute to dropdown-toggle button.

<div >
    <button  data-toggle="dropdown" data-bs-toggle="dropdown">Dropdown button</button>
    <div >
        <a href="#" >Link 1</a>
        <a href="#" >Link 2</a>
        <a href="#" >Link 3</a>
    </div>
</div>

Codepen live : https://codepen.io/Superawdi/pen/jOzYrvX