Bootstrap 4:导航内的多级下拉菜单

在Bootstrap 4中进行多级下拉的最简单方法是什么?我设法在SO上找到的所有示例过于混乱,或者没有包含在导航中。

我试过只是将一个下拉列表放到一个下拉列表中,但这似乎不起作用。有人可以帮我吗?

这是我的代码的基本轮廓:

<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>

回答:

我使用以下CSS和JavaScript。它使用一个额外的类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').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:导航内的多级下拉菜单 的全部内容, 来源链接: utcz.com/qa/410886.html

回到顶部