abstrak：通過(guò)這次作業(yè)明白很多。尤其是mouseout與mouseleave的差別，很明顯的提現(xiàn)了出來(lái)?；仡^我必須再寫兩遍。<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jq三級(jí)下拉</title><script type="text/
通過(guò)這次作業(yè)明白很多。尤其是mouseout與mouseleave的差別，很明顯的提現(xiàn)了出來(lái)?；仡^我必須再寫兩遍。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq三級(jí)下拉</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
*{margin: 0px;padding: 0px;}
.menu{margin:0 auto;height: 30px;width:500px;}
ul{list-style:none;}
ul li{height:30px;width:100px;line-height:30px;text-align:center;float:left;border:1px solid #1495E7;color:#333;}
.ul_two li{position: relative;}
.ul_three{position: absolute; top:0px;left: 100px}
.ul_three li{height: 30px;width: 100px;line-height: 30px;}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$('.ul_two').hide()
$('.ul_three').hide()
$('.li_one').mouseover(function(){
$(this).find('.ul_two').slideDown(500)
})
$('.li_one').mouseleave(function(){
$(this).find('.ul_two').slideUp(500)
})
$('.li_two').mouseover(function(){
$(this).find('.ul_three').slideDown(500)
})
$('.li_two').mouseleave(function(){
$(this).find('.ul_three').slideUp(500)
})
})
</script>
<div>
<ul>
<li>首頁(yè)</li>
<li>一年級(jí)
<ul>
<li>二年級(jí)1班</li>
<li>二年級(jí)2班
<ul>
<li>三年級(jí)1班</li>
<li>三年級(jí)2班</li>
<li>三年級(jí)3班</li>
</ul>
</li>
<li>二年級(jí)3班</li>
</ul>
</li>
<li>公告</li>
</ul>
</div>
</body>
</html>
Guru membetulkan：滅絕師太Masa pembetulan：2018-11-07 11:51:11
Rumusan guru：多多練習(xí)好處多多！js重在理解，每一條語(yǔ)句是什么意思，做到活學(xué)活用