JavaScript 实现网页菜单延迟加载效果》

本文主要是介绍JavaScript 实现网页菜单延迟加载效果》，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、整体代码结构

二、代码注解

1. HTML 结构部分

2. CSS 样式部分

3. JavaScript 部分

一、整体代码结构

<!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 = 0for(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"//延迟定时器//setTimeoutsetTimeout(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，确保子菜单完全隐藏。