下拉菜单中的 Bootstrap4 下拉菜单关闭父菜单
Posted
技术标签:
【中文标题】下拉菜单中的 Bootstrap4 下拉菜单关闭父菜单【英文标题】:Bootstrap4 dropright menu within a dropdown menu closes parent menu 【发布时间】:2019-12-05 15:53:09 【问题描述】:我在一个下拉菜单中有一个下拉菜单“F”,单击它时我需要展开它。现在它做了一些奇怪的事情——它关闭了父菜单(下拉菜单)。此外,当明确表示不应该扩展时,默认情况下会扩展下拉菜单。
找不到任何关于我的问题的信息,所以我请求您的帮助。
这是发生的事情的 gif 图像。
重现此的代码如下:
<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>
提前谢谢你!
【问题讨论】:
想要在下拉菜单中有下拉菜单吗? 看看这个:***.com/questions/44467377/… 【参考方案1】:嵌套下拉菜单需要一些 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>
【讨论】:
以上是关于下拉菜单中的 Bootstrap4 下拉菜单关闭父菜单的主要内容,如果未能解决你的问题,请参考以下文章