Bootstrap 4：导航中的多级下拉菜单 [英] Bootstrap 4: Multilevel Dropdown Inside Navigation
本文介绍了Bootstrap 4：导航中的多级下拉菜单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在Bootstrap 4中创建多级下拉最简单的方法是什么？我在SO上找到的所有示例都太乱了，或者不包含在nav中。
我试过在下拉菜单中放置下拉菜单，似乎它工作。有人可以帮我解决这个问题吗？
以下是我的代码的基本概要：
< link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap .min.cssintegrity =sha384-rwoIResjU2yc3z8GV / NPeZWAv56rSmLldC3R / AZzGRnGxQQKnKkoFVhFQhNUwEyJcrossorigin =anonymous>< script src =https://code.jquery.com/jquery-3.1.1.slim.min.js integrity =sha384-A7FZj7v + d / sdmMqp / nOQwliLvUsJfDHW + k9Omg / a / EheAdgtzNs3hpfag6Ed950ncrossorigin =anonymous>< / script>< script src =https://cdnjs.cloudflare.com/ajax/ libs / tether / 1.4.0 / js / tether.min.jsintegrity =sha384-DztdAPBWPRXSA / 3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrbcrossorigin =anonymous>< / script>< script src =https：//maxcdn.bootstrapcdn的.com /引导/ 4.0.0-alpha.6 / JS / BO otstrap.min.jsintegrity =sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk + 02D9phzyeVkE + jo0ieGizqPLForncrossorigin =anonymous>< / script>< nav class =navbar navbar-toggleable-md navbar-light bg-faded> < button class =navbar-toggler navbar-toggler-righttype =buttondata-toggle =collapsedata-target =＃navbarNavDropdownaria-controls =navbarNavDropdownaria-expanded =falsearia -label =切换导航> < span class =navbar-toggler-icon>< / span> < /按钮> < a class =navbar-brandhref =＃> Navbar< / a> < div class =collapse navbar-collapseid =navbarNavDropdown> < ul class =navbar-nav> < li class =nav-item active> < a class =nav-linkhref =＃>主页< span class =sr-only>（current）< / span>< / a> < /锂> < li class =nav-item> < a class =nav-linkhref =＃>连结1< / a> < /锂> < li class =nav-item dropdown> < a class =nav-link dropdown-togglehref =http://example.comid =navbarDropdownMenuLinkdata-toggle =dropdownaria-haspopup =truearia-expanded =false >下拉式连结< / a> < div class =dropdown-menuaria-labelledby =navbarDropdownMenuLink> < a class =dropdown-itemhref =＃>动作< / a> < a class =dropdown-itemhref =＃>另一个动作< / a> < a class =dropdown-itemhref =＃>其他东西在这里< / a> < / DIV> < /锂> < / UL> < / div>< / nav>
解决方案
我使用下面的一段css和javacript。它使用一个额外的类 dropdown-submenu 。我使用Bootstrap 4 beta测试了它。
它支持多级子菜单。
$（'。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'）。 bsdropdown'，function（e）{$（'。dropdown-submenu .show'）。removeClass（show）;}）; return false;}）;
.dropdown-submenu {position：relative;}。dropdown-submenu a :: after {transform：rotate（ - 90度）;位置：绝对;右：6px; top：.8em;}。dropdown-submenu .dropdown-menu {top：0;左：100％;余裕：.1rem; margin-right：.1rem;}
< link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.cssintegrity =sha384- / Y6pD6FV / Vv2HJnA6t + vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6Mcrossorigin =anonymous >< script src =https://code.jquery.com/jquery-3.2.1.slim.min.jsintegrity =sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr / rE9 / Qpg6aAZGJwFDMVNA / GpGFF93hXpG5KkNcrossorigin =anonymous> < / script>< script src =https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.jsintegrity =sha384-b / U6ypiBEHpOf / < / script>< script src =https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js< integrity =sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1crossorigin =anonymous>< / script>< nav class =navbar navbar-expand-lg navbar-light b G光> < a class =navbar-brandhref =＃> Navbar< / a> < button class =navbar-togglertype =buttondata-toggle =collapsedata-target =＃navbarNavDropdownaria-controls =navbarNavDropdownaria-expanded =falsearia-label =Toggle导航> < span class =navbar-toggler-icon>< / span> < /按钮> < div class =collapse navbar-collapseid =navbarNavDropdown> < ul class =navbar-nav> < li class =nav-item active> < a class =nav-linkhref =＃>主页< span class =sr-only>（current）< / span>< / a> < /锂> < li class =nav-item dropdown> < a class =nav-link dropdown-togglehref =http://example.comid =navbarDropdownMenuLinkdata-toggle =dropdownaria-haspopup =truearia-expanded =false >下拉式连结< / a> < ul class =dropdown-menuaria-labelledby =navbarDropdownMenuLink> < li>< a class =dropdown-itemhref =＃>动作< / a>< / li> < li>< a class =dropdown-itemhref =＃>另一个动作< / a>< / li> < li class =dropdown-submenu>< a class =dropdown-item dropdown-togglehref =＃>子菜单< / a> < ul class =dropdown-menu> < li>< a class =dropdown-itemhref =＃>子菜单操作< / a>< / li> < li>< a class =dropdown-itemhref =＃>另一个子菜单操作< / a>< / li> < li class =dropdown-submenu>< a class =dropdown-item dropdown-togglehref =＃> Subsubmenu< / a> < ul class =dropdown-menu> < li>< a class =dropdown-itemhref =＃>子子菜单操作< / a>< / li> < li>< a class =dropdown-itemhref =＃>另一个子子菜单操作< / a>< / li> < / UL> < /锂> < li class =dropdown-submenu>< a class =dropdown-item dropdown-togglehref =＃> Second subsubmenu< / a> < ul class =dropdown-menu> < li>< a class =dropdown-itemhref =＃>子子菜单操作< / a>< / li> < li>< a class =dropdown-itemhref =＃>另一个子子菜单操作< / a>< / li> < / UL> < /锂> < / UL> < /锂> < / UL> < /锂> < / UL> < / nav>
What's the easiest way to make a multilevel dropdown in Bootstrap 4? All the examples I managed to find on SO were either too messy or not included in nav.
I've tried just placing a dropdown inside a dropdown, but that doesn't seem like it's working. Can someone help me with this one?
Here's the basic outline of my code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
解决方案
I use the following piece of css and javacript. It uses an extra class dropdown-submenu. I tested it with Bootstrap 4 beta.
It supports multi level sub menus.
$('.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.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Submenu</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Submenu action</a></li>
<li><a class="dropdown-item" href="#">Another submenu action</a></li>
<li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Subsubmenu</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Subsubmenu action</a></li>
<li><a class="dropdown-item" href="#">Another subsubmenu action</a></li>
</ul>
</li>
<li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Second subsubmenu</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Subsubmenu action</a></li>
<li><a class="dropdown-item" href="#">Another subsubmenu action</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
这篇关于Bootstrap 4：导航中的多级下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
