下拉菜单中的子菜单在导航中不起作用

我有一个简单的导航，有一个'News'<a>。当点击它应该显示一个下拉菜单，有另外两个<a>'s "保加利亚"和";International"分别。点击"保加利亚"应该会显示另一个带有两页选项的下拉菜单"Dunavmost"和";Petel"。点击"国际"应该显示另外两个页面选项

"News"<a>的工作非常好，但点击"保加利亚"和";International"不工作。代码实际上是一样的，绝对没有理由失败，但它确实失败了。

这是我的<nav>:

<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container-fluid">
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">NewsWebsite</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink-News" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
News
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink-News">
<a class="dropdown-item dropdown-toggle" href="#" id="navbarDropdownMenuLink-Bulgaria" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Bulgaria
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink-Bulgaria">
<a class="dropdown-item" href="#">Dunavmost</a>
<a class="dropdown-item" href="#">Petel</a>
</div>
<a class="dropdown-item dropdown-toggle" href="#" id="navbarDropdownMenuLink-International" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
International
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink-International">
<a class="dropdown-item" href="#">NY Times</a>
<a class="dropdown-item" href="#">DragonFire</a>
</div>
</div>
</li>
</ul>
<partial name="_LoginPartial" />
</div>
</div>
</nav>

Bootstrap不支持嵌套/内部下拉列表。你现在的问题是，点击一个嵌套的下拉菜单，它实际上会关闭外部的下拉菜单。

然而，你仍然可以在JQuery和Bootstrap的JS方法的帮助下实现嵌套下拉。我是这样做的:

每个内部下拉框都被包裹在<div class="dropdown-submenu">容器中。这样我们就可以在以后的JQuery中针对它们。对于实际的内部下拉菜单，我们可以使用Boostrap.dropdown-menu类，就像你自己做的那样。还包括一个tab-index，所以内部的下拉菜单可以通过键盘访问。

JQuery
这里我们利用了Bootstrap的下拉方法。

当用户单击.dropdown-submenu的子.dropdown-toggle时，触发一个函数:

$('.dropdown-submenu a.dropdown-toggle').on("click", function(e) { ... }
在函数内部，我们首先选择下拉子菜单中的所有内部下拉菜单，除了被单击的那个，并删除show类以关闭它们。这样我们就不会有任何重叠的下拉菜单问题:

$('.dropdown-submenu .dropdown-menu').not($(this).next('.dropdown-menu')).removeClass('show');
然后，我们在单击的子菜单下拉菜单上切换显示类:

$(this).next('.dropdown-menu').toggleClass('show');
最后，e.stopPropagation();阻止外部下拉菜单关闭。

实施
确保在<head>中包含JQuery，就像JQuery脚本包含在代码片段的HTML部分的第一行一样。

工作的例子:
$('.dropdown-submenu a.dropdown-toggle').on("click", function(e) { $('.dropdown-submenu .dropdown-menu').not($(this).next('.dropdown-menu')).removeClass('show'); $(this).next('.dropdown-menu').toggleClass('show'); e.stopPropagation(); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script> <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3"> <div class="container-fluid"> <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">NewsWebsite</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between"> <ul class="navbar-nav mr-auto"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" role="button" id="navbarDropdownMenuLink-News" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> News </a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink-News"> <div class="dropdown-submenu"> <a class="dropdown-item dropdown-toggle" tabindex="-1" href="#">Bulgaria</a> <div class="dropdown-menu" tabindex="-1" role="menu" aria-hidden="true"> <a class="dropdown-item" href="#">Dunavmost</a> <a class="dropdown-item" href="#">Petel</a> </div> </div> <div class="dropdown-submenu"> <a class="dropdown-item dropdown-toggle" tabindex="-1" href="#">International</a> <div class="dropdown-menu" tabindex="-1" role="menu" aria-hidden="true"> <a class="dropdown-item" href="#">NY Times</a> <a class="dropdown-item" href="#">DragonFire</a> </div> </div> </div> </li> </ul> <partial name="_LoginPartial" /> </div> </div> </nav>

相关内容

最新更新

热门标签：