多级引导程序下拉菜单出现问题

Question

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

1. How do I make my sub menu show to left or right rather than vertically downwards?

2. 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.

3. Also multi level dropdowns are bringing an extra layer of complication ie 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'); // }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <nav class="navbar navbar-default"> <ul class="nav navbar-nav"> <li class="dropdown-submenu"> <a class="test" tabindex="-1" href="#">Dropdown 1 <span class="caret"></span></a> <ul class="dropdown-menu multi-level"> <li><a tabindex="-1" href="/#">Laughing</a></li> <li><a tabindex="-1" href="/#">Out</a></li> <li><a tabindex="-1" href="/#">Loud</a></li> <li class="divider"></li> <li class="dropdown-submenu"> <a class="test" tabindex="-1" href="#">*********<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a tabindex="-1" href="/#">Just</a></li> <li><a tabindex="-1" href="/#/1">Another</a></li> <li><a tabindex="-1" href="/#/1">Sub</a></li> <li><a tabindex="-1" href="/#/1">Menu</a></li> </ul> </ul> </li> </ul> <ul class="nav navbar-nav"> <li class="dropdown-submenu"> <a class="test" tabindex="-1" href="#">Dropdown 2 <span class="caret"></span></a> <ul class="dropdown-menu multi-level"> <li><a tabindex="-1" href="/#">Laughing</a></li> <li><a tabindex="-1" href="/#">Out</a></li> <li><a tabindex="-1" href="/#">Loud</a></li> <li class="divider"></li> <li class="dropdown-submenu"> <a class="test" tabindex="-1" href="#">*********<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a tabindex="-1" href="/#">Just</a></li> <li><a tabindex="-1" href="/#/1">Another</a></li> <li><a tabindex="-1" href="/#/1">Sub</a></li> <li><a tabindex="-1" href="/#/1">Menu</a></li> </ul> </ul> </li> </ul> </nav> 

Answer 1

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; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <nav class="navbar navbar-default"> <ul class="nav navbar-nav"> <li class="dropdown-submenu"> <a class="test" tabindex="-1" href="#">Dropdown 1 <span class="caret"></span></a> <ul class="dropdown-menu multi-level"> <li><a tabindex="-1" href="/#">Laughing</a></li> <li><a tabindex="-1" href="/#">Out</a></li> <li><a tabindex="-1" href="/#">Loud</a></li> <li class="divider"></li> <li class="dropdown-submenu"> <a class="test" tabindex="-1" href="#">*********<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a tabindex="-1" href="/#">Just</a></li> <li><a tabindex="-1" href="/#/1">Another</a></li> <li><a tabindex="-1" href="/#/1">Sub</a></li> <li><a tabindex="-1" href="/#/1">Menu</a></li> </ul> </ul> </li> </ul> <ul class="nav navbar-nav"> <li class="dropdown-submenu"> <a class="test" tabindex="-1" href="#">Dropdown 2 <span class="caret"></span></a> <ul class="dropdown-menu multi-level"> <li><a tabindex="-1" href="/#">Laughing</a></li> <li><a tabindex="-1" href="/#">Out</a></li> <li><a tabindex="-1" href="/#">Loud</a></li> <li class="divider"></li> <li class="dropdown-submenu"> <a class="test" tabindex="-1" href="#">*********<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a tabindex="-1" href="/#">Just</a></li> <li><a tabindex="-1" href="/#/1">Another</a></li> <li><a tabindex="-1" href="/#/1">Sub</a></li> <li><a tabindex="-1" href="/#/1">Menu</a></li> </ul> </ul> </li> </ul> </nav>