目录
一、整体代码结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- defer延迟加载只针对外引 -->
<script>
//JavaScript延迟加载
window.onload=function(){
var first_li=document.querySelectorAll(".main>li")
for(var i = 0; i<first_li.length; i++){
first_li[i].onmouseenter =function(){
if(this.querySelector("ul")){
// this.querySelector("ul").style.display= "block"
//获取盒子的高度
var second_li=this.querySelectorAll("ul li")
var sum_height = 0
for(var j = 0;j < second_li.length; j++){
sum_height += second_li[j].clientHeight
}
this.querySelector("ul").style.height = sum_height+ "px"
}
}
first_li[i].onmouseleave =function(){
if(this.querySelector("ul")){
// this.querySelector("ul").style.display= "none"
this.querySelector("ul").style.height = "0px"
//延迟定时器
//setTimeout
setTimeout(function(){
var second_ul=document.querySelector(".main ul")
for(var m=0;j<second_ul.length;m++){
second_ul[m].style.display= "none"
}
},2000)
}
}
}
}
</script>
<style>
*{
padding: 0;
margin: 0;
transition: all 1s ease;
}
a{
text-decoration: none;
}
li{
list-style: none;
}
.content{
margin: 80px auto;
background: red;
}
.main{
width: 80%;
margin: 0px auto;
display: flex;
justify-content: space-between;
}
.main>li{
position: relative;
}
.main>li ul{
/* display: none; */
height: 0px;
position: absolute;
background: red;
}
.main>li a{
color: aliceblue;
padding: 8px;
display: block;
}
.main>li a:hover{
color: red;
background: floralwhite;
}
</style>
</head>
<body>
<div class="content">
<ul class="main">
<li><a href="#">首页</a></li>
<li>
<a href="#">网上报告</a>
<ul>
<li><a href="#">入学指南</a></li>
<li><a href="#">入学指南</a></li>
<li><a href="#">入学指南</a></li>
<li><a href="#">入学指南</a></li>
</ul>
</li>
<li>
<a href="#">网上报告</a>
<ul>
<li><a href="#">入学指南</a></li>
<li><a href="#">入学指南</a></li>
<li><a href="#">入学指南</a></li>
<li><a href="#">入学指南</a></li>
</ul>
</li>
<li>
<a href="#">网上报告</a>
<ul>
<li><a href="#">入学指南</a></li>
<li><a href="#">入学指南</a></li>
<li><a href="#">入学指南</a></li>
<li><a href="#">入学指南</a></li>
</ul>
</li>
<li>
<a href="#">网上报告</a>
<ul>
<li><a href="#">入学指南</a></li>
<li><a href="#">入学指南</a></li>
<li><a href="#">入学指南</a></li>
<li><a href="#">入学指南</a></li>
</ul>
</li>
<li>
<a href="#">网上报告</a>
<ul>
<li><a href="#">入学指南</a></li>
<li><a href="#">入学指南</a></li>
<li><a href="#">入学指南</a></li>
<li><a href="#">入学指南</a></li>
</ul>
</li>
<li>
<a href="#">网上报告</a>
<ul>
<li><a href="#">入学指南</a></li>
<li><a href="#">入学指南</a></li>
<li><a href="#">入学指南</a></li>
<li><a href="#">入学指南</a></li>
</ul>
</li>
<li>
<a href="#">网上报告</a>
<ul>
<li><a href="#">入学指南</a></li>
<li><a href="#">入学指南</a></li>
<li><a href="#">入学指南</a></li>
<li><a href="#">入学指南</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>二、代码注解
1. HTML 结构部分
<meta charset="UTF-8">：设置页面的字符编码为 UTF-8，以支持多种语言字符的显示。<meta name="viewport" content="width=device-width, initial-scale=1.0">：用于设置移动端的视口属性，确保页面在不同设备上都能良好显示。<title>Document</title>：设置页面的标题，显示在浏览器标签页上。<div class="content">：一个容器元素，用于包裹菜单列表。<ul class="main">：主菜单列表，包含多个<li>元素，每个<li>元素代表一个菜单项。
2. CSS 样式部分
* { padding: 0; margin: 0; transition: all 1s ease; }：重置所有元素的内边距和外边距为 0，并设置了一个通用的过渡效果，使元素的属性变化更加平滑。a { text-decoration: none; }：去除链接的下划线。li { list-style: none; }：去除列表项的默认标记。.content { margin: 80px auto; background: red; }：设置容器的外边距为上下 80 像素，左右自动居中，并设置背景颜色为红色。.main { width: 80%; margin: 0px auto; display: flex; justify-content: space-between; }：设置主菜单列表的宽度为页面宽度的 80%，水平居中显示，并使用 flex 布局使菜单项平均分布。.main>li { position: relative; }：设置主菜单列表项为相对定位，为子菜单的绝对定位提供参考。.main>li ul { display: none; height: 0px; position: absolute; background: red; }：设置子菜单列表初始状态为隐藏，高度为 0，绝对定位，并设置背景颜色为红色。.main>li a { color: aliceblue; padding: 8px; display: block; }：设置主菜单链接的颜色为白色，内边距为 8 像素，以块级元素显示。.main>li a:hover { color: red; background: floralwhite; }：设置主菜单链接在鼠标悬停时的颜色为红色，背景颜色为花白色。
3. JavaScript 部分
window.onload = function () {...}：在页面加载完成后执行的函数。确保页面的 DOM 结构完全加载后再执行 JavaScript 代码，避免因 DOM 元素未加载而导致的错误。var first_li = document.querySelectorAll(".main>li");：使用querySelectorAll方法获取所有类名为main的元素下的直接子元素<li>，即主菜单列表项。for (var i = 0; i < first_li.length; i++) {...}：遍历所有主菜单列表项。first_li[i].onmouseenter = function () {...}：为主菜单列表项添加鼠标移入事件监听器。当鼠标移入时，执行以下操作：if (this.querySelector("ul")) {...}：检查当前主菜单列表项是否包含子菜单<ul>。this.querySelector("ul").style.display = "block";：如果有子菜单，将子菜单的显示属性设置为block，使其显示出来。var second_li = this.querySelectorAll("ul li");：获取当前主菜单列表项下的子菜单列表项。var sum_height = 0; for (var j = 0; j < second_li.length; j++) { sum_height += second_li[j].clientHeight; }：计算子菜单列表项的总高度。this.querySelector("ul").style.height = sum_height + "px";：将子菜单的高度设置为计算得到的总高度，实现子菜单的平滑展开效果。
first_li[i].onmouseleave = function () {...}：为主菜单列表项添加鼠标移出事件监听器。当鼠标移出时，执行以下操作：if (this.querySelector("ul")) {...}：检查当前主菜单列表项是否包含子菜单<ul>。this.querySelector("ul").style.height = "0px";：将子菜单的高度设置为 0，使其逐渐隐藏。setTimeout(function () {...}, 1000);：设置一个延迟定时器，在 1 秒后执行回调函数。var second_ul = document.querySelectorAll(".main ul"); for (var j = 0; j < second_ul.length; j++) { second_ul[j].style.display = "none"; }：获取所有主菜单列表项下的子菜单<ul>，并将其显示属性设置为none，确保子菜单完全隐藏。
