多級引導程序下拉菜單出現問題

Question

如您在我的片段中所見； 下拉列表垂直向下顯示。 這是我的查詢。

1. 如何使子菜單向左或向右而不是垂直向下顯示？

2. 截至目前，僅當我再次單擊插入符號時，此菜單才會消失。 從UX角度來看，這可能很煩人。 因此，我添加了三行注釋行，當單擊記錄中的任何位置時，它將使下拉列表消失。 但是，在隨后的點擊中，下拉菜單將不起作用。 我知道為什么它不起作用，但是我找不到解決方法。

3. 多級下拉菜單也帶來了一層額外的復雜性，即如果只是一個下拉菜單，我們可以根據需要顯示和隱藏。 由於存在多個下拉列表，因此該代碼只是隨意地隱藏/取消隱藏。

請提出前進的方向。

PS：請提供引導程序3而不是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

我在下拉菜單中修改了一些CSS屬性，首先設置top：0； 這樣下拉列表將顯示在父元素的頂部。 然后我離開：25％； 這會使下拉菜單在父元素的左側出現一些空格。

對於隨后的下拉菜單， 我設置left：100％; 這樣它們就會顯示在父級下拉列表的右側。

與其在每次要關閉類時都添加“ hide”類，不如修改其css。

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

我還添加了一個代碼，如果單擊的元素不在多級下拉菜單中，它將隱藏所有其他子菜單。

運行代碼段；

 $('.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>