Dropdown not worked on bootstrap 5.3-CodePudding

I trying to create navigation bar with bootstrap.

I read the docs from here, but my drop down not working.

I attached everything in the <head> <head/> section but dropdown not worked for me.

This is my 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>НИМХ - АС и БД, Филиал - Пловдив</title>
<!-- index.css -->
    <link rel="stylesheet" href="./css/index.css">
<!-- CSS Leaflet-->
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
     integrity="sha256-kLaT2GOSpHechhsozzB flnD zUyjE2LlfWPgU04xyI="
     crossorigin=""/>
<!-- JS Leaflet -->
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
     integrity="sha256-WBkoXOwTeyKclOHuWtc i2uENFpDZ9YPdf5Hf D7ewM="
     crossorigin=""></script>
<!-- CSS Bootstrap-->
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<!-- JS Bootstrap-->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC nuZB EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</head>
<body>
    <nav >
        <div >
          <a  href="#">Navbar</a>
          <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span ></span>
          </button>
          <div  id="navbarSupportedContent">
            <ul >
              <li >
                <a  aria-current="page" href="#">Home</a>
              </li>
              <li >
                <a  href="#">Link</a>
              </li>
              <li >
                <a  href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                  Dropdown
                </a>
                <ul >
                  <li><a  href="#">Action</a></li>
                  <li><a  href="#">Another action</a></li>
                  <li><hr ></li>
                  <li><a  href="#">Something else here</a></li>
                </ul>
              </li>
              <li >
                <a >Disabled</a>
              </li>
            </ul>
            <form  role="search">
              <input  type="search" placeholder="Search" aria-label="Search">
              <button  type="submit">Search</button>
            </form>
          </div>
        </div>
      </nav>
    <div id="map">
        <!-- Load map -->
        <script src="./js/leaflet.js"></script> 
    </div>
</body>
</html>

Can I get example with worked dropdown on bootstrap 5.3 ?

I think I have attached all the necessary libraries for the dropdown menu to work ?

CodePudding user response：

You have to add Bootstrap's JavaScript as well:

// Add this line before the closing </body> tag
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC nuZB EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

i.e.

    <div id="map">
        <!-- Load map -->
        <script src="./js/leaflet.js"></script> 
    </div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC nuZB EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>

CodePudding user response：

You have included BOOTSTRAP twice! delete this row from your head tag

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>

Working example without it: https://jsfiddle.net/MarinHTML/8kscdbn9/11/

------EDIT----- depricated old answer: ---

you're gonna need some JS to do the job here, because what you did is NEST a dropdown into another dropdown. Not sure if possible by simple bootstrap means. You can, but it must be on hover, and I presume you don't want that.

Here is a quick example of what I think you want: https://jsfiddle.net/MarinHTML/t7zmqcd9/

And here is the JS to use it:

    let dds = document.querySelectorAll('.dropdown-toggle')
dds.forEach((dd)=>{
    dd.addEventListener('click', function (e) {
        var el = this.nextElementSibling
        el.style.display = el.style.display==='block'?'none':'block'
    })
})

CodePudding user response：

Bootstrap provides you with several stackblitz links to check their templates, like this: https://stackblitz.com/run?file=index.html

Used on your code would be something like this:

<!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>НИМХ - АС и БД, Филиал - Пловдив</title>
<!-- index.css -->
    <link rel="stylesheet" href="./css/index.css">
<!-- CSS Leaflet-->
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
     integrity="sha256-kLaT2GOSpHechhsozzB flnD zUyjE2LlfWPgU04xyI="
     crossorigin=""/>
     
<!-- JS Leaflet -->
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
     integrity="sha256-WBkoXOwTeyKclOHuWtc i2uENFpDZ9YPdf5Hf D7ewM="
     crossorigin=""></script>
<!-- CSS Bootstrap-->
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<!-- JS Bootstrap-->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
</head>
<body>
    <nav >
        <div >
          <a  href="#">Navbar</a>
          <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span ></span>
          </button>
          <div  id="navbarSupportedContent">
            <ul >
              <li >
                <a  aria-current="page" href="#">Home</a>
              </li>
              <li >
                <a  href="#">Link</a>
              </li>
              <li >
                <a  href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                  Dropdown
                </a>
                <ul >
                  <li><a  href="#">Action</a></li>
                  <li><a  href="#">Another action</a></li>
                  <li><hr ></li>
                  <li><a  href="#">Something else here</a></li>
                </ul>
              </li>
              <li >
                <a >Disabled</a>
              </li>
            </ul>
            <form  role="search">
              <input  type="search" placeholder="Search" aria-label="Search">
              <button  type="submit">Search</button>
            </form>
          </div>
        </div>
      </nav>
    <div id="map">
        <script src="./js/leaflet.js"></script> 
    </div>
    <!--here -->
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">      </script>
    <!-- here -->
</body>
</html>

So all that you are missing is the:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

before the body close tag