摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery三級下拉菜單導(dǎo)航</title> <script type="text/javascript" src=&qu
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery三級下拉菜單導(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(){
//隱藏下級導(dǎo)航
$('.nav-2').hide();
$('.nav-3').hide();
//移動到某個元素上時，顯示對應(yīng)的下級菜單
$('.nav-1>li').mouseover(function(){
//向下淡出
//檢查是否有下級菜單
$(this).find('.nav-2').slideDown(100);
})
//移出的時候收起
$('.nav-1>li').mouseleave(function(){
//向上淡出
$(this).find('.nav-2').slideUp(100);
})
//再下一級
$('.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>注意細節(jié)，獲取的時候有時候忘記加.了，找了好久
批改老師：查無此人批改時間：2019-01-04 15:25:34
老師總結(jié)：我也看了好久，代碼一多，就亂。不過功能都對的，繼續(xù)加油。