在Bootstrap的Dropdown 4和Dropdown 5中打开左侧的所有子菜单,可以通过以下步骤实现:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
菜单
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">子菜单1</a>
<a class="dropdown-item" href="#">子菜单2</a>
<a class="dropdown-item" href="#">子菜单3</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">子菜单4</a>
</div>
</div>
.dropdown-menu .dropdown-submenu {
position: static;
}
.dropdown-menu .dropdown-submenu .dropdown-menu {
display: none;
}
.dropdown-menu .dropdown-submenu:hover > .dropdown-menu {
display: block;
}
在Bootstrap 5中,可以使用以下样式:
.dropdown-menu .dropdown-menu {
display: none;
}
.dropdown-menu .show .dropdown-menu {
display: block;
}
$('.dropdown-menu a.dropdown-toggle').on('mouseover', 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;
});
在Bootstrap 5中,可以使用以下代码:
$('.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;
});
通过以上步骤,你可以在Bootstrap的Dropdown 4和Dropdown 5中打开左侧的所有子菜单。请注意,以上代码示例中的CSS样式和JavaScript代码是通用的,不依赖于特定的云计算品牌商。
领取专属 10元无门槛券
手把手带您无忧上云