如何在 Bootstrap 4 中创建多级下拉菜单？-css教程-PHP中文网

如何在 Bootstrap 4 中创建多级下拉菜单？

Patricia Arquette

发布： 2024-12-18 19:07:10

原创

469 人浏览过

How do I create multilevel dropdowns in Bootstrap 4?

Bootstrap 4 中的多级下拉菜单

使用 Bootstrap 4 时，在导航栏中合并多级下拉菜单有时会带来挑战。然而，结合 CSS 和 JavaScript，创建这些下拉菜单相对简单。

用于多级下拉菜单的 CSS

为了实现多级下拉菜单，引入了额外的 CSS 类：

.dropdown-submenu：这个类是应用于包含子下拉列表的父菜单项。
.dropdown-menu：此类应用于子下拉列表。
。 dropdown-item：此类适用于下拉列表中的所有项目

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

至处理子下拉菜单的切换，以下 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;
});

登录后复制

此代码将事件侦听器附加到子下拉列表中具有 dropdown-toggle 类的任何项目。单击某一项时，它会切换子下拉菜单上的显示类，确保一次仅打开一个子下拉菜单。

与 HTML 集成

在 HTML 代码中，只需添加多级下拉列表所需的类，如下所示示例：