Bootstrap dropdown submenu closing upstream submenu

Question

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!

Answer 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

Answer 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/

Answer 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();
  });
});