Jquery is not closing drop-down

Question

I was building, multi-level(only second level) dropdown with Bootstrap Navigation Bar. I could find One guide to build Multi-level dropdown.

JSFiddle link

However, the drop-down is not closing on click. The dropdown can be closed by clicking in the Document, I have added below jquery.

$(document).click(function(){
    $('.dropdown-menu').removeClass('show');
});

The drop-down closes, but, when clicked in other nav-item the opened dropdown does not closes. So, basic JQuery is missing by me. Basically show class is not removing from .dropdown-menu class when clicked in other nav-item. So, I want to remove the show class from .dropdown-menu

Edit : I am looking for working JS or Jquery code, the above Jquery is broken code copied from the staoverflow. So, looking for complete and clean solution

$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
    if (!$(this).next().hasClass('show')) {
      $(this).parents('.dropdown-menu').first().find('.show').removeClass('show');
    }
    var $subMenu = $(this).next('.dropdown-menu');
    $subMenu.toggleClass('show');
  
    return false;
  });

$(document).click(function() {
    //   $('.dropdown-menu').toggleClass('show');
$('.dropdown-menu').removeClass('show');
});

$('.dropdown').click(function(event){
  event.stopPropagation();
});

.dropdown-submenu {
    position: relative;
  }
  
  .dropdown-submenu a::after {
    transform: rotate(-90deg);
    position: absolute;
    right: 6px;
    top: .8em;
  }
  
  .dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-left: .1rem;
    margin-right: .1rem;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-md navbar-dark bg-primary py-1">
        <div class="container-fluid">
        <div class="flex-row d-flex">         
            <a class="navbar-brand" href="#">Brand</a>
        </div>    
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button> 
<div class="navbar-collapse collapse" id="navbarSupportedContent">
            <ul class="navbar-nav">
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                    Dogs
                  </a>
                  <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <li><a class="dropdown-item" href="#">Bulldog</a></li>
                    <li><a class="dropdown-item" href="#">Al</a></li>
                    <li><a class="dropdown-item" href="#">Labrador</a></li>
                    <li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Puppies</a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#">Husky</a></li>
                            <li><a class="dropdown-item" href="#">Husky B</a></li>
                            <li><a class="dropdown-item" href="#">Husky C</a></li>
                          </ul>
                    </li>
                    <li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Pet Products</a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#">Cat</a></li>
                            <li><a class="dropdown-item" href="#">Dogs</a></li>
                            <li><a class="dropdown-item" href="#">Reptile</a></li>
                            <li><a class="dropdown-item" href="#">Amphibian</a></li>
                          </ul>
                    </li>
                  </ul>
                </li>
                  <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                      Pet Cages
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                      <li><a class="dropdown-item" href="#">Cat</a></li>
                      <li><a class="dropdown-item" href="#">Dogs</a></li>
                      <li><a class="dropdown-item" href="#">Reptile</a></li>
                    </ul>
                  </li>
                  <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                      Pet Guides
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                      <li><a class="dropdown-item" href="#">Labrador</a></li>
                      <li><a class="dropdown-item" href="#">Cat</a></li>
                      <li><a class="dropdown-item" href="#">Lizard</a></li>
                    </ul>
                  </li>
                  <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                      ML & AI
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                      <li><a class="dropdown-item" href="#">Pet CBD</a></li>                      
                    </ul>
                  </li>
                <!-- <form class="d-flex"> -->
                    <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                    <!-- <button class="btn btn-outline-success" type="submit">Search</button> -->
                  <!-- </form> -->
              </ul>
        </div>
        </div>
        </nav>

@user1735921 add `show` in the class list of the parent element `#navbarSupportedContent` — Will, Feb 07 '21 at 20:17
@munna01 Your complete set of example code right here in the question should fully reproduce your issue. Testing in Chrome, this snippet seems to work as it stands here. Please provide more details or specific information regarding your issue in that specific set of code as part of your actual question. (not the fiddle, this one here) — Mark Schultheiss, Feb 08 '21 at 14:01
@MarkSchultheiss Please check, I have added gif screenshot(explaining the issue - "Dogs dropdown should close clicking on Pet Cages dropdown" — , Feb 09 '21 at 00:22

Bourbia Brahim · Accepted Answer · 2021-02-21T07:25:17.583

for the MAIN PROBLEM OF PERSISTANT OPPENED DROPWON , you can fix that problem by listening the nav-link event show.bs.dropdown and then remove the show class from the .dropdown wrapped by .dropdown-submenu

as folow :

$('.nav-link').on('show.bs.dropdown', function(e) {
  $(".dropdown-submenu .dropdown-menu").removeClass("show");
});

See below working snippet : ( try it also in fullscreen )

For the sake of testing , I've rmoved some menu from snippet :

$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
  if (!$(this).next().hasClass('show')) {
    $(this).parents('.dropdown-menu').first().find('.show').removeClass('show');
  }
  var $subMenu = $(this).next('.dropdown-menu');
  $subMenu.toggleClass('show');

  return false;
});


$('.nav-link').on('show.bs.dropdown', function(e) {
  $(".dropdown-submenu .dropdown-menu").removeClass("show");
});

$(document).on("click", ".nav-link", function(e){
  console.log("clicl nav");
})

$('.dropdown').click(function(event) {
  console.log("click");
  event.stopPropagation();
});

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu a::after {
  transform: rotate(-90deg);
  position: absolute;
  right: 6px;
  top: .8em;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-left: .1rem;
  margin-right: .1rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-md navbar-dark bg-primary py-1">
  <div class="container-fluid">
    <div class="flex-row d-flex">
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    <div class="navbar-collapse collapse" id="navbarSupportedContent">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                    Dogs
                  </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Bulldog</a></li>
            <li><a class="dropdown-item" href="#">Al</a></li>
            <li><a class="dropdown-item" href="#">Labrador</a></li>
            <li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Puppies</a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Husky</a></li>
                <li><a class="dropdown-item" href="#">Husky B</a></li>
                <li><a class="dropdown-item" href="#">Husky C</a></li>
              </ul>
            </li>
            <li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Pet Products</a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Cat</a></li>
                <li><a class="dropdown-item" href="#">Dogs</a></li>
                <li><a class="dropdown-item" href="#">Reptile</a></li>
                <li><a class="dropdown-item" href="#">Amphibian</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                      Pet Cages
                    </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Cat</a></li>
            <li><a class="dropdown-item" href="#">Dogs</a></li>
            <li><a class="dropdown-item" href="#">Reptile</a></li>
          </ul>
        </li>
        <!-- <button class="btn btn-outline-success" type="submit">Search</button> -->
        <!-- </form> -->
      </ul>
    </div>
  </div>
</nav>

@munna01 , could you describe what you need exactly ? close dropdown once clicking outside ? — Bourbia Brahim, Feb 07 '21 at 21:41
yes. clicking even other nav-link, should close previously opened nav(side-nav)s — , Feb 07 '21 at 21:43
Could you please look into - this issue, new question asked: https://stackoverflow.com/questions/66098848/bootstrap-4-dropdown-not-working-with-bootstrap-5 — , Feb 08 '21 at 09:31
@munna01 , updated my answer , I think now I could understand your problem (after seen the screen record gif ) — Bourbia Brahim, Feb 10 '21 at 20:10
Was the error from my end that I could not write better to convince you. Maybe my English was not good(Is that the reason) — , Feb 11 '21 at 00:50
@munna01 , no , that's my fault , I was reading quickly, that's why I didn't take in consideration the real problem , but after coming back and seeing the image I understood my mistake :) — Bourbia Brahim, Feb 11 '21 at 08:41
This answer was requested from another account, for "Voting Irregularities, maybe your account also" suspended. `$(document).click(function(event) {if ($(event.target).closest("nav.navbar").length === 0)$(".navbar-toggler:not(.collapsed)").click();});` This part causing trouble, removed, removing this, also works fine. You you respond me in twitter, as account suspended — Susobhan Das, Feb 16 '21 at 08:17

score 0 · Answer 2 · answered Feb 10 '21 at 04:18

You don't need to add jQuery to achieve this. Remove jQuery and additional javascript code and your dropdown menu will work from adding a simple css code.

        .dropdown-submenu {
            position: relative;
        }
        
        .dropdown-submenu > .dropdown-menu {
            top: 0;
            left: 100%;
            margin-top: -6px;
            margin-left: -1px;
            -webkit-border-radius: 0 6px 6px 6px;
            -moz-border-radius: 0 6px 6px;
            border-radius: 0 6px 6px 6px;
        }
        
        .dropdown-submenu:hover > .dropdown-menu {
            display: block;
        }
        
        .dropdown-submenu>a : after {
            display: block;
            content: " ";
            float: right;
            width: 0;
            height: 0;
            border-color: transparent;
            border-style: solid;
            border-width: 5px 0 5px 5px;
            border-left-color: #ccc;
            margin-top: 5px;
            margin-right: -10px;
        }
        
        .dropdown-submenu:hover > a : after {
            border-left-color: #fff;
        }
        
        .dropdown-submenu.pull-left {
            float: none;
        }
        
        .dropdown-submenu.pull-left > .dropdown-menu {
            left: -100%;
            margin-left: 10px;
            -webkit-border-radius: 6px 0 6px 6px;
            -moz-border-radius: 6px 0 6px 6px;
            border-radius: 6px 0 6px 6px;
        }

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-md navbar-dark bg-primary py-1">
        <div class="container-fluid">
        <div class="flex-row d-flex">         
            <a class="navbar-brand" href="#">Brand</a>
        </div>    
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button> 
<div class="navbar-collapse collapse" id="navbarSupportedContent">
            <ul class="navbar-nav">
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                    Dogs
                  </a>
                  <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <li><a class="dropdown-item" href="#">Bulldog</a></li>
                    <li><a class="dropdown-item" href="#">Al</a></li>
                    <li><a class="dropdown-item" href="#">Labrador</a></li>
                    <li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Puppies</a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#">Husky</a></li>
                            <li><a class="dropdown-item" href="#">Husky B</a></li>
                            <li><a class="dropdown-item" href="#">Husky C</a></li>
                          </ul>
                    </li>
                    <li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Pet Products</a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#">Cat</a></li>
                            <li><a class="dropdown-item" href="#">Dogs</a></li>
                            <li><a class="dropdown-item" href="#">Reptile</a></li>
                            <li><a class="dropdown-item" href="#">Amphibian</a></li>
                          </ul>
                    </li>
                  </ul>
                </li>
                  <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                      Pet Cages
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                      <li><a class="dropdown-item" href="#">Cat</a></li>
                      <li><a class="dropdown-item" href="#">Dogs</a></li>
                      <li><a class="dropdown-item" href="#">Reptile</a></li>
                    </ul>
                  </li>
                  <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                      Pet Guides
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                      <li><a class="dropdown-item" href="#">Labrador</a></li>
                      <li><a class="dropdown-item" href="#">Cat</a></li>
                      <li><a class="dropdown-item" href="#">Lizard</a></li>
                    </ul>
                  </li>
                  <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                      ML & AI
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                      <li><a class="dropdown-item" href="#">Pet CBD</a></li>                      
                    </ul>
                  </li>
                <!-- <form class="d-flex"> -->
                    <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                    <!-- <button class="btn btn-outline-success" type="submit">Search</button> -->
                  <!-- </form> -->
              </ul>
        </div>
        </div>
        </nav>

Can not accept hover, this breaks site in Mobile. – Feb 10 '21 at 06:35 — , Feb 10 '21 at 06:35

Jquery is not closing drop-down

2 Answers2

Linked