????：知識點（1）展開下級菜單時使用$(this).find()方法，僅查找當前對象下級目標，否則所有下級會全部展開。$('.lv2>li').mouseover(function(){ $(this).find('.lv3').slideDown(500) })（2）鼠標移開上級目錄，下級菜單收起，使用mousele
知識點
（1）展開下級菜單時使用$(this).find()方法，僅查找當前對象下級目標，否則所有下級會全部展開。
$('.lv2>li').mouseover(function(){
$(this).find('.lv3').slideDown(500)
})（2）鼠標移開上級目錄，下級菜單收起，使用mouseleave()方法。
$('.lv2>li').mouseleave(function(){
$(this).find('.lv3').slideUp(500)
})難點處理
問題：ul li設置浮動后，頂層div的border-radius以及background-color無法顯示
處理：在div與列表之間添加一個div，并清除浮動。
完整代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery三級導航</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(),僅查找當前對象下的目標,否則會全部生效
$('.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
?? ???：韋小寶?? ??：2018-11-16 16:35:42
???? ??：嗯！不錯！很完整！課后還要多多練習啊?。±^續(xù)加油吧！