Dropdown in toggler dont work / bootstrap-CodePudding

I have navbar with lot of lists. I want to use dropdown and toogler on mobile devices. Problem is when navbar is toggled dropdown menu after touch will close whole toogler.

<nav  data-navbar-on-scroll="data-navbar-on-scroll">
      <div ><a  href="index.html"><img src="assets/img/gallery/logo-n.png" height="45" alt="logo" /></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="index.html">Domů</a></li>
            <li >
              <a  href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                Základní škola
              </a>
              <ul  aria-labelledby="navbarDropdownMenuLink">
            <li><a  href="#">Chrakteristika ZŠ</a></li>
            <li><a  href="#">Organizace školního roku</a></li>
            <li><a  href="#">Školská rada</a></li>

        </ul>
        <li ><a  aria-current="page" href="web-development.html">Mateřská škola</a></li>
        <li ><a  aria-current="page" href="user-research.html">Jídelna</a></li>
        <li ><a  aria-current="page" href="user-research.html">EKOškola MŠ a ZŠ</a></li>
        <li ><a  aria-current="page" href="user-research.html">Družina</a></li>
        <li ><a  aria-current="page" href="user-research.html">Málinka z. s.</a></li>
        <li ><a  aria-current="page" href="user-research.html">Dokumenty</a></li>
        <li ><a  aria-current="page" href="user-research.html">Kontakty</a></li>
        </ul>


      </div>
      </div>
      </div>
    </nav>

CodePudding user response：

I once had the same problem. In my case I didn't add the following line in my code

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

Aswel make sure if you have this code you comment this part of code out

<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u LWgxfKTRIcfu0JTxR EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
-->

Make sure you have the template that they recommand: Starter template

https://getbootstrap.com/docs/5.0/getting-started/introduction/

CodePudding user response：

<nav  data-navbar-on-scroll="data-navbar-on-scroll">
    <div >
        <a  href="index.html">
            <img src="assets/img/gallery/logo-n.png" height="45" alt="logo" />
        </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="index.html">Domů</a></li>
                <li >
                    <a  href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        Základní škola
                    </a>
                    <ul  aria-labelledby="navbarDropdownMenuLink">
                        <li><a  href="#">Chrakteristika ZŠ</a></li>
                        <li><a  href="#">Organizace školního roku</a></li>
                        <li><a  href="#">Školská rada</a></li>
                    </ul>
                </li>
                <li ><a  aria-current="page" href="web-development.html">Mateřská škola</a></li>
                <li ><a  aria-current="page" href="user-research.html">Jídelna</a></li>
                <li ><a  aria-current="page" href="user-research.html">EKOškola MŠ a ZŠ</a></li>
                <li ><a  aria-current="page" href="user-research.html">Družina</a></li>
                <li ><a  aria-current="page" href="user-research.html">Málinka z. s.</a></li>
                <li ><a  aria-current="page" href="user-research.html">Dokumenty</a></li>
                <li ><a  aria-current="page" href="user-research.html">Kontakty</a></li>
            </ul>
        </div>
    </div>
</nav>

I check it works but you forgot to close a tag