Problems with multi level bootstrap dropdown

Question

As you can see in my snippet; the dropdowns show vertically downwards. Here are my queries.

How do I make my sub menu show to left or right rather than vertically downwards?
As of now this menu is disappear only if I click on the caret sign again. This can be tiresome from UX perspective. So I added the three commented lines that will make it dropdown disappear when clicked anywhere in documented; But on subsequent clicks the dropdown wont work. I know why it wont work but I cant find a way around.
Also multi level dropdowns are bringing an extra layer of complication i.e if it was just one dropdown we can show and hide as we wish. Since there are multiple dropdowns, the code just hides/unhides haphazardly.

Please suggest a way forward.

PS: Kindly provide a solution with bootstrap 3 and not 4.

$('.dropdown-submenu a.test').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
  
  //document.addEventListener("click", function () {
    //    $('.dropdown-menu:visible').addClass('hide');
   // });





	
		
			Dropdown 1 
			
				Laughing
				Out
				Loud
				
				
				*********
				
					Just
					Another
					Sub
					Menu
				
			
		
	
	
		
			Dropdown 2 
			
				Laughing
				Out
				Loud
				
				
				*********
				
					Just
					Another
					Sub
					Menu

Jerdine Sabio · Accepted Answer

I modified a few css properties on your dropdown menu, first I set top:0; so that the dropdown would appear at the top of the parent element. Then I set left:25%; this would make the dropdown menu appear a few spaces on the left of the parent element.

For the subsequent dropdowns, I set left:100%; so that they would appear on the right of the parent dropdown.

Instead of adding the class 'hide' everytime you want to close it, modify its css instead;

$('.dropdown-menu:visible').css('display','none');

I also added a code wherein it would hide all the other submenus if the clicked element isn't inside a multilevel dropdown.

Run the snippet;

$('.dropdown-submenu a.test').on("click", function(e) {
  $(this).next('ul').toggle();

  // the parent dropdown-submenu which is a li tag
  var clickedDropdown = $(this).parent();

  // the parent of the li tag which is a ul tag
  var parentDropdown = $(this).parent().parent();

  if (!parentDropdown.hasClass("multi-level")) {

    // if the clicked element has a parent dropdown, hide all other submenus
    $(".dropdown-menu").each(function() {
      if ($(this).parent()[0] != clickedDropdown[0]) {
        $(this).css("display", "none");
      }
    });
  }

  e.stopPropagation();
  e.preventDefault();
});

document.addEventListener("click", function() {
  $('.dropdown-menu:visible').css('display', 'none');
});

.dropdown-menu {
  left: 25% !important;
  top: 0 !important;
}

.dropdown-menu .dropdown-menu {
  left: 100% !important;
}





  
    
      Dropdown 1 
      
        Laughing
        Out
        Loud
        
        
          *********
          
            Just
            Another
            Sub
            Menu
          
      
      
  
  
    
      Dropdown 2 
      
        Laughing
        Out
        Loud
        
        
          *********
          
            Just
            Another
            Sub
            Menu

Problems with multi level bootstrap dropdown

Answers (1)

Related Questions