Bootstrap dropdown submenu closing upstream submenu

I have a two-level dropdown that's working great, but when I add another level, the JS seems to be removing the open class from the previous submenu, which means that the desired third-level menu can't be seen, even though it does get the open class added.

I've tracked it down to this JS:

  $(function() {    $('li.dropdown-submenu').on('click', function(event) {       event.stopPropagation();       if ($(this).hasClass('open')){           $(this).removeClass('open');       } else {           $('li.dropdown-submenu').removeClass('open');           $(this).addClass('open');      }   }); }); 

This is, I think, doing the undesired closing of the previous submenu. The HTML is very similar to this example.

Using an adaptation of the JS from that example, I get the third level, but then any given open submenu doesn't automatically close when clicking another submenu.

$(document).ready(function(){   $('.dropdown-submenu a').on("click", function(e){     $(this).next('ul').toggle();     e.stopPropagation();     e.preventDefault();   }); }); 

Need the best of both here!

3 Answers

Answers 1

I think you almost had it, you just needed to look for the different clicks.

The approach I took below was to handle all a clicks but then check to see if it had a class of test which then followed your code verbatim or else, if it didn't have a class of test it then hides all the submenus and goes to it's default href.

<script> $(document).ready(function(){   $('.dropdown-submenu a').on("click", function(e){     if ($(this).hasClass('test')) {       $(this).next('ul').toggle();       e.stopPropagation();       e.preventDefault();     } else {       $('.dropdown-submenu ul').hide();     }   }); }); </script> 

Your updated working example: https://www.w3schools.com/code/tryit.asp?filename=FUB7ECWP20DA

Answers 2

Maybe this is what are you looking for.

This code to close submenu when clicking another submenu.

Javascript

$(document).ready(function(){     $('.dropdown-submenu a.test').on("click", function(e){      /* This is to hide all dropdown-menu children if the parent(dropdown-submenu) in the element have been clicked */      $(this).next('ul').find('.dropdown-menu').each(function(){         $(this).hide();     });      /* This is to find another dropdown-menu have has been opened and hide its submenu */        var xw = $(this);     $(this).closest(".dropdown-menu").find('.dropdown-submenu a.test').not(xw).each(function(){         if($(this).next("ul").is(":visible")){             $(this).next("ul").hide();         }     });      $(this).next('ul').toggle();     e.stopPropagation();     e.preventDefault();     }); }); 

And JSFiddle example : https://jsfiddle.net/synz/vasho634/

Answers 3

I hope this is what you want. Here is the Solution, Not Full Proof but upto that extent whre you want

$(document).ready(function(){   $('.dropdown-submenu a.test').on("click", function(e){      siblingUl = $(this).parent().siblings("li.dropdown-submenu").children("ul").css("display");     if(siblingUl == "block"){     $(this).parent().siblings("li.dropdown-submenu").children("ul").toggle();     }     $(this).next('ul').toggle();     e.stopPropagation();     e.preventDefault();   }); }); 

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati