我在下拉菜单中有一个下拉菜单“ F”,单击该菜单时需要将其展开。现在,它做了一些奇怪的事情-关闭了父菜单(下拉菜单)。默认情况下,当明确表示不应打开下拉菜单时,也会默认展开该菜单。
找不到有关我的问题的任何信息,所以我正在寻求您的帮助。
这是发生的事情的照片。
以下是重现此代码的代码:
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</li>
<li class="nav-item">
<div class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Operations
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" asp-area="" asp-controller="" asp-action="" asp-route-companyId="">A</a>
<a class="dropdown-item" asp-area="" asp-controller="" asp-action="" asp-route-companyId="">B</a>
<a class="dropdown-item" asp-area="" asp-controller="" asp-action="" asp-route-companyId="">C</a>
<a class="dropdown-item" asp-area="" asp-controller="" asp-action="" asp-route-companyId="">D</a>
<a class="dropdown-item" asp-area="" asp-controller="" asp-action="" asp-route-companyId="">E</a>
<div class="dropright">
<a class="dropdown-toggle nav-link" id="navbarDropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
F
</a>
<div class="dropdown-submenu" aria-labelledby="navbarDropdownMenuLink2">
<a class="dropdown-item" asp-area="" asp-controller="" asp-action="" asp-route-companyId="">F1</a>
<a class="dropdown-item" asp-area="" asp-controller="" asp-action="" asp-route-companyId="">F2</a>
</div>
</div>
</div>
</div>
</li>
</ul>
提前谢谢!
答案 0 :(得分:0)
对于嵌套的下拉列表,您将需要一些JavaScript;没有dropdown-submenu
类;看看下面的代码是否能满足您的需求...
$(document).ready(function() {
$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
if (!$(this).next().hasClass('show')) {
$(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
}
var $subMenu = $(this).next(".dropdown-menu");
$subMenu.toggleClass('show');
$(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
$('.dropdown-submenu .show').removeClass("show");
});
return false;
});
});
.dropdown-submenu {
position: relative;
}
.dropdown-submenu a::after {
transform: rotate(-90deg);
position: absolute;
right: 6px;
top: .8em;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-left: .1rem;
margin-right: .1rem;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#">Home</a>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Privacy</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Operations
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#" asp-area="" asp-controller="" asp-action="" asp-route-companyId="">A</a></li>
<li><a class="dropdown-item" href="#" asp-area="" asp-controller="" asp-action="" asp-route-companyId="">B</a></li>
<li><a class="dropdown-item" href="#" asp-area=" " asp-controller=" " asp-action=" " asp-route-companyId=" ">C</a></li>
<li><a class="dropdown-item" href="#" asp-area=" " asp-controller=" " asp-action=" " asp-route-companyId=" ">D</a></li>
<li><a class="dropdown-item" href="#" asp-area="" asp-controller="" asp-action="" asp-route-companyId="">E</a></li>
<li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">F</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#" asp-area="" asp-controller="" asp-action="" asp-route-companyId="">F1</a></li>
<li><a class="dropdown-item" href="#" asp-area="" asp-controller="" asp-action="" asp-route-companyId="">F2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>