目录
一、整体代码结构
<!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
,确保子菜单完全隐藏。