abstrait：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery三級(jí)下拉菜單導(dǎo)航</title> <script type="text/javascript" src=&qu
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery三級(jí)下拉菜單導(dǎo)航</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src=""></script>
<link rel="stylesheet" type="text/css" href="">
<style type="text/css">
*{margin:0px;padding: 0px;}
body{background: #fff;font-size:14px;}
ul{list-style: none;}
a{text-decoration: none; color: #aaa;}
.header{width:100%;height: 40px;background: #ccc;}
.header .nav{width: 960px;margin:0 auto;}
.nav .nav-1>li{float: left;background: #000; width: 158px;height: 38px;line-height: 40px;text-align: center;border: 1px solid #333;}
.nav .nav-2>li,.nav .nav-3>li{background: #000; width: 158px;height: 20px;line-height: 20px;text-align: center;border: 1px solid #333;position: relative;color: #fff;}
.nav .nav-3{position: absolute;left:158px;top:0px;}
</style>
<script type="text/javascript">
$(document).ready(function(){
//隱藏下級(jí)導(dǎo)航
$('.nav-2').hide();
$('.nav-3').hide();
//移動(dòng)到某個(gè)元素上時(shí)，顯示對(duì)應(yīng)的下級(jí)菜單
$('.nav-1>li').mouseover(function(){
//向下淡出
//檢查是否有下級(jí)菜單
$(this).find('.nav-2').slideDown(100);
})
//移出的時(shí)候收起
$('.nav-1>li').mouseleave(function(){
//向上淡出
$(this).find('.nav-2').slideUp(100);
})
//再下一級(jí)
$('.nav-2>li').mouseover(function(){
$(this).find('.nav-3').slideDown(100);
})
$('.nav-2>li').mouseleave(function(){
$(this).find('.nav-3').slideUp(100);
})
})
</script>
</head>
<body>
<div>
<div>
<ul>
<li><a href="#">HTML</a>
<ul>
<li>第一章
<ul>
<li>第一節(jié)</li>
<li>第二節(jié)</li>
<li>第三節(jié)</li>
</ul>
</li>
<li>第二章
<ul>
<li>第一節(jié)</li>
<li>第二節(jié)</li>
<li>第三節(jié)</li>
</ul>
</li>
<li>第三章
<ul>
<li>第一節(jié)</li>
<li>第二節(jié)</li>
<li>第三節(jié)</li>
</ul>
</li>
<li>第四章
<ul>
<li>第一節(jié)</li>
<li>第二節(jié)</li>
<li>第三節(jié)</li>
</ul>
</li>
<li>第五章
<ul>
<li>第一節(jié)</li>
<li>第二節(jié)</li>
<li>第三節(jié)</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">CSS</a>
<ul>
<li>第一章
<ul>
<li>第一節(jié)</li>
<li>第二節(jié)</li>
<li>第三節(jié)</li>
</ul>
</li>
<li>第二章
<ul>
<li>第一節(jié)</li>
<li>第一節(jié)</li>
<li>第二節(jié)</li>
<li>第三節(jié)</li>
</ul>
</li>
<li>第三章
<ul>
<li>第一節(jié)</li>
<li>第一節(jié)</li>
<li>第二節(jié)</li>
<li>第三節(jié)</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">JavaScript</a>
<ul>
<li>第一章</li>
<li>第二章
<ul>
<li>第一節(jié)</li>
<li>第二節(jié)</li>
<li>第三節(jié)</li>
</ul>
</li>
<li>第三章
<ul>
<li>第一節(jié)</li>
<li>第二節(jié)</li>
<li>第三節(jié)</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Jquery</a>
<ul>
<li>第一章
<ul>
<li>第一節(jié)</li>
<li>第一節(jié)</li>
<li>第二節(jié)</li>
<li>第三節(jié)</li>
</ul>
</li>
<li>第二章
<ul>
<li>第一節(jié)</li>
<li>第二節(jié)</li>
<li>第三節(jié)</li>
</ul>
</li>
<li>第三章
<ul>
<li>第一節(jié)</li>
<li>第二節(jié)</li>
<li>第三節(jié)</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Bootstrap</a>
<ul>
<li>第一章
<ul>
<li>第一節(jié)</li>
<li>第二節(jié)</li>
<li>第三節(jié)</li>
</ul>
</li>
<li>第二章
<ul>
<li>第一節(jié)</li>
<li>第二節(jié)</li>
<li>第三節(jié)</li>
</ul>
</li>
<li>第三章
<ul>
<li>第一節(jié)</li>
<li>第二節(jié)</li>
<li>第三節(jié)</li>
</ul>
</li>
<li>第四章
<ul>
<li>第一節(jié)</li>
<li>第二節(jié)</li>
<li>第三節(jié)</li>
</ul>
</li>
<li>第五章
<ul>
<li>第一節(jié)</li>
<li>第二節(jié)</li>
<li>第三節(jié)</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Vue</a>
<ul>
<li>第一章
</li>
<li>第二章
<ul>
<li>第一節(jié)</li>
<li>第二節(jié)</li>
<li>第三節(jié)</li>
</ul>
</li>
<li>第三章
<ul>
<li>第一節(jié)</li>
<li>第二節(jié)</li>
<li>第三節(jié)</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>注意細(xì)節(jié)，獲取的時(shí)候有時(shí)候忘記加.了，找了好久
Professeur correcteur：查無(wú)此人Temps de correction：2019-01-04 15:25:34
Résumé du professeur：我也看了好久，代碼一多，就亂。不過(guò)功能都對(duì)的，繼續(xù)加油。