Bootstrap 4 中的多级下拉菜单
在 Bootstrap 4 中创建多级下拉菜单并不像以前的版本那么简单。为了实现它，您可以结合使用 CSS 和 JavaScript。以下解决方案引入了子菜单的 dropdown-submenu 类项目：
CSS：
.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;
}JavaScript：
$('.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;
});HTML：
<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">该解决方案允许多级下拉菜单具有简洁且响应式的设计。它与默认的 Bootstrap 4 样式无缝协作，并添加了切换子菜单的功能。
以上是如何在 Bootstrap 4 中创建多级下拉菜单？的详细内容。更多信息请关注PHP中文网其他相关文章！
