![](/img/trans.png)
[英]How to toggle between two menu items on click and close previous when next is toggled?
[英]How to close toggle when next list is toggled
這是一個多子下拉菜單,實際上我正在嘗試一次切換一個菜單(即只有選定的菜單會顯示其他應該關閉的菜單)。
這是我的代碼
HTML
<div class="collapse navbar-collapse pull-left" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Master<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">MENU-A<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">A1-CHILD</a></li>
<li><a tabindex="-1" href="#">A2-CHILD</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">MENU-B<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">B1-CHILD</a></li>
<li><a tabindex="-1" href="#">B2CHILD</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">MENU-C <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" href="#">C1-CHILD <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="/supplier/create">C1-A</a></li>
<li><a href="/supplier/index">C1-B</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" href="#">C2-CHILD <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="/weight-balance-map/create">C2-A</a></li>
<li><a href="/weight-balance-map/create">C2-B</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
JS :
$(document).ready(function{
$(".dropdown-submenu a.test").on("click", function(e){
$(this).next("ul").toggle();
e.stopPropagation();
e.preventDefault();
});
});
CSS:
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
這在另一個菜單切換后並沒有關閉,並且第三級子菜單對於第一個答案並不靈活。 謝謝,
您需要在發生點擊事件的地方獲得closest
ul,然后使用.not()
將其從隱藏中排除,然后只需使用next("ul").toggle();
顯示下拉菜單。
演示代碼:
$(document).ready(function() { $(".dropdown-submenu a.test").on("click", function(e) { //get closest `li`-> ul var selector = $(this).closest(".dropdown-submenu").find("ul"); //hid all other li and ul $(".dropdown-submenu ul").not(selector).not(this.closest('ul')).hide() $(this).next("ul").toggle(); //show this a-> next ul e.stopPropagation(); e.preventDefault(); }); });
.dropdown-submenu { position: relative; }.dropdown-submenu.dropdown-menu { top: 0; left: 100%; margin-top: -1px; display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="collapse navbar-collapse pull-left" id="navbar-collapse"> <ul class="nav navbar-nav"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Master<span class="caret"></span></a> <ul class="dropdown-menu"> <li class="dropdown-submenu"> <a class="test" tabindex="-1" href="#">MENU-A<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#">A1-CHILD</a></li> <li><a tabindex="-1" href="#">A2-CHILD</a></li> </ul> </li> <li class="dropdown-submenu"> <a class="test" tabindex="-1" href="#">MENU-B<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#">B1-CHILD</a></li> <li><a tabindex="-1" href="#">B2CHILD</a></li> </ul> </li> <li class="dropdown-submenu"> <a class="test" tabindex="-1" href="#">MENU-C <span class="caret"></span></a> <ul class="dropdown-menu"> <li class="dropdown-submenu"> <a class="test" href="#">C1-CHILD <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="/supplier/create">C1-A</a></li> <li><a href="/supplier/index">C1-B</a></li> </ul> </li> <li class="dropdown-submenu"> <a class="test" href="#">C2-CHILD <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="/weight-balance-map/create">C2-A</a></li> <li><a href="/weight-balance-map/create">C2-B</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.