三级下拉菜单的js实现代码-前端开发

实现三级下拉菜单需要用到js编程，下面是三级下拉菜单的JS实现代码的完整攻略。

实现三级下拉菜单需要用到js编程，下面是三级下拉菜单的JS实现代码的完整攻略。

步骤一：HTML代码

先创建一个HTML页面，用于容纳三级下拉菜单。其中需要有三个层级的<ul>标签，如下所示：

<nav>
  <ul>
    <li><a href="#">菜单1</a>
      <ul>
        <li><a href="#">子菜单1.1</a>
          <ul>
            <li><a href="#">子子菜单1.1.1</a></li>
            <li><a href="#">子子菜单1.1.2</a></li>
          </ul>
        </li>
        <li><a href="#">子菜单1.2</a></li>
      </ul>
    </li>
    <li><a href="#">菜单2</a></li>
    <li><a href="#">菜单3</a></li>
  </ul>
</nav>

步骤二：CSS代码

我们需要设置下拉菜单的样式，为此，在CSS中将以下这些样式规则应用于<ul>和<li>标记：

nav ul ul {
  display: none;
}
nav ul li:hover > ul {
  display: block;
}

步骤三：JS代码

现在，我们来实现JS代码，将下列代码添加到<head>标记之后：

window.onload = function() {
  var dropdowns = document.querySelectorAll('nav ul li ul');
  for (var i = 0; i < dropdowns.length; i++) {
    dropdowns[i].addEventListener('click', function(e) {
      e.stopPropagation();
    });
  }
}

此外，还需要一个函数用于在鼠标停留时切换下拉菜单。因此，应该添加以下代码：

function handleClick(e) {
  e.preventDefault();
  var submenu = this.parentNode.querySelector('ul');
  if (submenu) {
    var isVisible = submenu.style.display === 'block';
    dropdowns = document.querySelectorAll('ul ul');
    for (var i = 0; i < dropdowns.length; i++) {
      dropdowns[i].style.display = 'none';
    }
    if (!isVisible) {
      submenu.style.display = 'block';
    }
  }
}

最后，在for循环中添加下面的代码：

var toggles = document.querySelectorAll('nav ul li a');

我们的三级下拉菜单已经可以正常工作了。

示例说明

下面提供了两个例子，说明如何将上述代码应用于不同的网站。

示例一：使用CSS

基于Bootstrap框架的网站使用CSS代码来设定三级下拉菜单的宽度。网页头部如下：

<head>
  <!-- 引入Bootstrap框架 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  <style>
    /*调整下拉菜单的宽度*/
    .navbar .dropdown-menu .sub-menu {
      left: 100%; 
      position: absolute; 
      top: 0;
      visibility: hidden; 
      margin-top: -1px;
    }

    .navbar .dropdown-menu li:hover > .sub-menu {
      visibility: visible;
    }

    .navbar .dropdown:hover > .dropdown-menu {
      display: block;
    }   
  </style>
</head>

在列表中增加以下代码段：

<div class="navbar-collapse collapse">
  <ul class="nav navbar-nav">
    <li class="dropdown">
      <a href="#">菜单1</a>
      <ul class="dropdown-menu">
        <li><a href="#">子菜单1.1</a></li>
        <li class="dropdown dropdown-submenu">
          <a href="#">子菜单1<span class="caret"></span></a>
          <ul class="dropdown-menu sub-menu">
            <li><a href="#">子子菜单1.1.1</a></li>
            <li><a href="#">子子菜单1.1.2</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">菜单2</a></li>
    <li><a href="#">菜单3</a></li>
  </ul>
</div>

示例二：使用JavaScript

构建单独的JavaScript文件并使用基于函数handleClick的方法来创建三级下拉菜单。

<head>
  <script src="js/dropdown.js"></script>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <nav>
    <ul>
      <li><a href="#">菜单1</a>
        <ul>
          <li><a href="#">子菜单1.1</a>
            <ul>
              <li><a href="#">子子菜单1.1.1</a></li>
              <li><a href="#">子子菜单1.1.2</a></li>
            </ul>
          </li>
          <li><a href="#">子菜单1.2</a></li>
        </ul>
      </li>
      <li><a href="#">菜单2</a></li>
      <li><a href="#">菜单3</a></li>
    </ul>
  </nav>
</body>

在dropdown.js中添加以下代码：

window.onload = function() {
  var dropdowns = document.querySelectorAll('nav ul li ul');
  for (var i = 0; i < dropdowns.length; i++) {
    dropdowns[i].addEventListener('click', function(e) {
      e.stopPropagation();
    });
  }
  var toggles = document.querySelectorAll('nav ul li a');
  for (var i = 0; i < toggles.length; i++) {
    toggles[i].addEventListener('click', handleClick);
  }
}

这种方法允许您使用纯JavaScript代码来实现三级下拉菜单，这将使您的页面加载更快，并且不需要依赖第三方库。