CODEWITHSUNDEEP
jquerywordpressbootstrap-5
microb14
microb14

Reputation: 483

Dropown menu open/close

I use navbar menu from Bootstrap5. My dropdown doesn't open or close

i add a jquery function and the drowpdown works only to open but not top close

$(".dropdown-toggle").click(function (event) {
    $('.dropdown-menu').addClass('show');
});
$(".dropdown-toggle").click(function (event) {
    $('.dropdown-menu.show').removeClass('show');
});

Upvotes: 0

Views: 299

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362670

There's no reason to use jQuery in Bootstrap 5. Just make sure you're using the appropriate data-bs- attribues on the dropdown toggler..

 <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown
      </a>
      <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
      </ul>
 </li>

Demo

Upvotes: 1

Ian
Ian

Reputation: 184

Just change the addClass to a toggleClass and remove the second click detection:

$(".dropdown-toggle").click(function (event) {
    $('.dropdown-menu').toggleClass('show');
});

Upvotes: 0

Related Questions