[英]How to close toggle when next list is toggled
This is a multi-child dropdown menu, Actually I am trying to toggle a menu one at a time (ie only selected menu will show other should close).这是一个多子下拉菜单,实际上我正在尝试一次切换一个菜单(即只有选定的菜单会显示其他应该关闭的菜单)。
Here is my code这是我的代码
HTML 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 : JS :
$(document).ready(function{
$(".dropdown-submenu a.test").on("click", function(e){
$(this).next("ul").toggle();
e.stopPropagation();
e.preventDefault();
});
});
CSS: CSS:
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
This didn't close after another menu toggles and the third level of submenu didn't flexible for the first answer.这在另一个菜单切换后并没有关闭,并且第三级子菜单对于第一个答案并不灵活。 thanks,
谢谢,
You need to get closest
ul where click event has occur then using .not()
exclude it from hiding and then simply use next("ul").toggle();
您需要在发生点击事件的地方获得
closest
ul,然后使用.not()
将其从隐藏中排除,然后只需使用next("ul").toggle();
to show dropdown menu.显示下拉菜单。
Demo code :演示代码:
$(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.