我有一个嵌套的下拉菜单。但是，当依次单击时，项目彼此重叠。
此处的密码笔：https://codepen.io/logan-lee/pen/BaadBxg
我尝试过
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$('.dropdown-submenu ul').hide(); // this is a fix that doesn't work
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
但是这不适用于嵌套项目。
如果删除“修复”行，则嵌套的项目会相互重叠（这是原始问题）。
谢谢。
我将所有这些内容放在此处，以便于阅读。回答您的两个问题：）
HTML：
<body>
<header>
<div class="container">
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header navbar-right">
<a class = "navbar-brand" href = "#">My LINUX distros</a>
</div>
<div class="nav navbar-nav">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
My favorite Linux distros...
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">RPM-based <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Mandrake Linux</a></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">Fedora-based <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Yellow Dog Linux</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">Debian-based <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Ubuntu</a></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">Ubuntu flavors <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Lubuntu</a></li>
<li><a href="#">Xubuntu</a></li>
<li><a href="#">Kubuntu</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">Others <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Slackware</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
</header>
</body>
CSS：
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
position: absolute;
top: 0;
left: 100%;
margin-top: -1px;
}
jQuery：
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$('.dropdown-submenu ul').not(this.closest('ul')).hide();
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});