【揭秘Bootstrap4】轻松构建多级菜单的实战攻略

Bootstrap 4是一个流行的前端框架，它提供了丰富的组件和工具来帮助开发者快速构建响应式网站。在Bootstrap 4中，构建多级菜单是一个常见的需求，以下是一篇详细的实战攻略，帮助您轻松实现这一功能。

一、多级菜单概述

多级菜单通常指的是包含多个层级，每个层级都可以展开或收起的菜单。在Bootstrap 4中，我们可以使用<nav>元素、<ul>和<li>元素来构建多级菜单。

二、HTML结构

首先，我们需要构建多级菜单的HTML结构。以下是一个简单的例子：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <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 dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          第一级菜单
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">第二级菜单1</a>
          <a class="dropdown-item" href="#">第二级菜单2</a>
          <div class="dropdown-submenu">
            <a class="dropdown-item" href="#">第三级菜单1</a>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#">第四级菜单1</a>
              <a class="dropdown-item" href="#">第四级菜单2</a>
            </div>
          </div>
        </div>
      </li>
      <!-- 其他菜单项 -->
    </ul>
  </div>
</nav>

三、CSS样式

Bootstrap 4提供了丰富的CSS类来帮助我们美化菜单。以下是一些常用的CSS类：

• .nav-item: 用于菜单项。
• .dropdown: 用于下拉菜单。
• .dropdown-menu: 用于下拉菜单的内容。
• .dropdown-submenu: 用于嵌套的下拉菜单。

四、JavaScript脚本

为了实现菜单的交互效果，我们需要使用JavaScript。以下是一个简单的例子：

document.addEventListener('DOMContentLoaded', function () {
  var dropdowns = document.querySelectorAll('.dropdown-submenu > a');
  dropdowns.forEach(function (dropdown) {
    dropdown.addEventListener('click', function (e) {
      var dropdownMenu = dropdown.nextElementSibling;
      dropdownMenu.classList.toggle('show');
      e.stopPropagation();
    });
  });
});

五、实战案例

以下是一个使用Bootstrap 4构建的多级菜单的实战案例：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <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 dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          第一级菜单
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">第二级菜单1</a>
          <a class="dropdown-item" href="#">第二级菜单2</a>
          <div class="dropdown-submenu">
            <a class="dropdown-item" href="#">第三级菜单1</a>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#">第四级菜单1</a>
              <a class="dropdown-item" href="#">第四级菜单2</a>
            </div>
          </div>
        </div>
      </li>
      <!-- 其他菜单项 -->
    </ul>
  </div>
</nav>

通过以上步骤，您就可以轻松地在Bootstrap 4中构建多级菜单了。希望这篇实战攻略对您有所帮助！