摘要：<!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;position: relative;}
.borde{height: 2px;overflow: height;width: 158px;background-color: red;position: absolute;top:38px;}
.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(){
//下劃線跟隨效果
$('.nav-1>li').hover(
function(){
$x=parseInt($(this).attr('name'))*160;
$('.borde').stop().animate({left:$x+'px'},300)
},
function(){
$('.borde').stop().animate({left:'0px'},300)
}
)
//隱藏下級導(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 name="0"><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 name="1"><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 name="2"><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 name="3"><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 name="4"><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 name="5"><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>
</div>
</div>
</body>
</html>首先獲取元素，然后用.hover方法去切換；兩個函數(shù)直接要用，號分割。定義一個變量去接收當(dāng)前元素的值整型數(shù)。用parseInt(）方法獲取整型數(shù)。
用獲取數(shù)組，然后遍歷數(shù)組去改變可以不老師？
感覺直接用Html的偽屬性方便
批改老師：韋小寶批改時間：2019-01-05 09:23:26
老師總結(jié)：總的來說是寫的很不錯！想到了其他的方法可以改變那就可以嘗試著去改寫一下??！出錯電腦又不會爆炸！編程要敢想敢寫！