实现三级下拉菜单需要用到js编程，下面是三级下拉菜单的JS实现代码的完整攻略。
先创建一个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中将以下这些样式规则应用于<ul>和<li>标记：
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
现在，我们来实现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');
我们的三级下拉菜单已经可以正常工作了。
下面提供了两个例子，说明如何将上述代码应用于不同的网站。
基于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文件并使用基于函数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代码来实现三级下拉菜单，这将使您的页面加载更快，并且不需要依赖第三方库。
本文链接：http://task.lmcjl.com/news/15801.html