abstrakt：知識(shí)點(diǎn)（1）展開下級(jí)菜單時(shí)使用$(this).find()方法，僅查找當(dāng)前對(duì)象下級(jí)目標(biāo)，否則所有下級(jí)會(huì)全部展開。$('.lv2>li').mouseover(function(){ $(this).find('.lv3').slideDown(500) })（2）鼠標(biāo)移開上級(jí)目錄，下級(jí)菜單收起，使用mousele
知識(shí)點(diǎn)
（1）展開下級(jí)菜單時(shí)使用$(this).find()方法，僅查找當(dāng)前對(duì)象下級(jí)目標(biāo)，否則所有下級(jí)會(huì)全部展開。
$('.lv2>li').mouseover(function(){
$(this).find('.lv3').slideDown(500)
})（2）鼠標(biāo)移開上級(jí)目錄，下級(jí)菜單收起，使用mouseleave()方法。
$('.lv2>li').mouseleave(function(){
$(this).find('.lv3').slideUp(500)
})難點(diǎn)處理
問題：ul li設(shè)置浮動(dòng)后，頂層div的border-radius以及background-color無法顯示
處理：在div與列表之間添加一個(gè)div，并清除浮動(dòng)。
完整代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery三級(jí)導(dǎo)航</title>
<script src="js/jquery-3.3.1.js"></script>
<style type="text/css">
*{margin: 0px 0px; padding: 0px 0px;}
ul{list-style: none;}
.menu{width: 1000px; height: 30px; margin: 0px auto; border-radius: 5px; background-color: #0055CC; color: #FFFFFF;}
.clear{clear: both;}
.menu>ul>li{float: left; border-right: 1px solid white;}
ul li{width: 150px; line-height: 30px; text-align: center; }
.lv1 li{font-size: 18px;}
.lv2 li{position: relative; color: #CCCCCC; background-color: royalblue;}
.lv3{position: absolute; left: 150px; top: 0px;}
.lv2 li:hover{color: white; background-color: #0055CC;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('.lv3').hide()
$('.lv2>li').mouseover(function(){
$(this).find('.lv3').slideDown(500)
})
//$(this).find(),僅查找當(dāng)前對(duì)象下的目標(biāo),否則會(huì)全部生效
$('.lv2>li').mouseleave(function(){
$(this).find('.lv3').slideUp(500)
})
$('.lv2').hide()
$('.lv1>li').mouseover(function(){
$(this).find('.lv2').slideDown(500)
})
$('.lv1>li').mouseleave(function(){
$(this).find('.lv2').slideUp(500)
})
})
</script>
</head>
<body>
<div class="menu">
<div class="clear"></div>
<ul class="lv1">
<li>首頁</li>
<li>產(chǎn)品
<ul class="lv2">
<li>產(chǎn)品1</li>
<li>產(chǎn)品2
<ul class="lv3">
<li>產(chǎn)品2.1</li>
<li>產(chǎn)品2.2</li>
<li>產(chǎn)品2.3</li>
</ul>
</li>
<li>產(chǎn)品3
<ul class="lv3">
<li>產(chǎn)品3.1</li>
<li>產(chǎn)品3.2</li>
<li>產(chǎn)品3.3</li>
</ul>
</li>
<li>產(chǎn)品4</li>
</ul>
</li>
<li>公司新聞
<ul class="lv2">
<li>公司新聞1</li>
<li>公司新聞2</li>
<li>公司新聞3</li>
</ul>
</li>
<li>行業(yè)新聞</li>
<li>聯(lián)系我們
<ul class="lv2">
<li>郵箱</li>
<li>電話</li>
<li>地圖</li>
</ul>
</ul>
</div>
</body>
</html>END
Korrigierender Lehrer：韋小寶Korrekturzeit：2018-11-16 16:35:42
Zusammenfassung des Lehrers：嗯！不錯(cuò)！很完整！課后還要多多練習(xí)?。?！繼續(xù)加油吧！