首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Bootstrap:如何在Dropdown 4和Dropdown 5中打开左侧的所有子菜单?

在Bootstrap的Dropdown 4和Dropdown 5中打开左侧的所有子菜单,可以通过以下步骤实现:

  1. 首先,确保你已经引入了Bootstrap的相关CSS和JavaScript文件。
  2. 在HTML中创建一个Dropdown组件,并添加一个父菜单项和子菜单项。例如:
代码语言:txt
复制
<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>
  1. 使用CSS样式来控制子菜单的显示方式。在Bootstrap 4中,可以使用以下样式:
代码语言:txt
复制
.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中,可以使用以下样式:

代码语言:txt
复制
.dropdown-menu .dropdown-menu {
  display: none;
}

.dropdown-menu .show .dropdown-menu {
  display: block;
}
  1. 在JavaScript中添加事件处理程序,以便在鼠标悬停或点击父菜单项时显示子菜单。在Bootstrap 4中,可以使用以下代码:
代码语言:txt
复制
$('.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中,可以使用以下代码:

代码语言:txt
复制
$('.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代码是通用的,不依赖于特定的云计算品牌商。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的合辑

领券