我希望在下拉菜单关闭时关闭下拉菜单中的子菜单。 但是现在如果我再次切换下拉菜单,子菜单仍然打开。
https://plnkr.co/edit/YUmUGHctRlypUq1BNA0p?p=preview
HTML
<nav id="sideNavBar">
<ul class="nav nav-pills nav-stacked">
<li class="dropdown">
<a href="#" id="menu" data-toggle="dropdown" class="droptown-toggle">Dropdown<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a href="#" class="test" data-toggle="dropdown">Submenu-1<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<a href="#">Item-1</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
JS
$(document).ready(function() {
var $links = $('.dropdown-submenu a.test').on("click", function(e) {
var submenu = $(this).next();
$subs.not(submenu).hide()
submenu.toggle();
//$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
var $subs = $links.next();
});
最佳答案
你可以这样做
$('.droptown-toggle').on('click', function(e) {
$('.dropdown-submenu .dropdown-menu').hide();
});
附言。我认为 droptown-toggle
是一个拼写错误,但我使用的是您的类名。
关于javascript - 如何自动关闭 Bootstrap 4 下拉菜单中的子菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48705854/