abstrakt:通過這次作業(yè)明白很多。尤其是mouseout與mouseleave的差別,很明顯的提現了出來?;仡^我必須再寫兩遍。<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jq三級下拉</title><script type="text/
通過這次作業(yè)明白很多。尤其是mouseout與mouseleave的差別,很明顯的提現了出來?;仡^我必須再寫兩遍。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq三級下拉</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>首頁</li>
<li>一年級
<ul>
<li>二年級1班</li>
<li>二年級2班
<ul>
<li>三年級1班</li>
<li>三年級2班</li>
<li>三年級3班</li>
</ul>
</li>
<li>二年級3班</li>
</ul>
</li>
<li>公告</li>
</ul>
</div>
</body>
</html>
Korrigierender Lehrer:滅絕師太Korrekturzeit:2018-11-07 11:51:11
Zusammenfassung des Lehrers:多多練習好處多多!js重在理解,每一條語句是什么意思,做到活學活用