abstract：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>jQuery三級下拉菜單</title> <style> * { margin: 0; padding: 0; } .menu { wi
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery三級下拉菜單</title>
<style>
* {
margin: 0;
padding: 0;
}
.menu {
width: 800px;
height: 30px;
background-color: #000000;
margin: 0 auto;
border-radius: 10px;
color: #ffffff;
border: 1px solid #ccc;
margin-top: 20px;
}
ul {
list-style: none;
}
ul li {
width: 100px;
height: 30px;
font-size: 14px;
line-height: 30px;
text-align: center;
float: left;
border-right: 1px solid #ffffff;
cursor: pointer;
}
.twobox li {
width: 100px;
height: 30px;
background-color: #ccc;
color: #000;
font-size: 14px;
line-height: 30px;
position: relative;
border: 0px;
}
.twobox li:hover {
color: #ffffff;
background-color: #000;
}
.three {
position: absolute;
top: 0;
left: 100px;
}
.three li {
width: 99px;
height: 30px;
line-height: 30px;
border: 0;
}
</style>
<script type="text/javascript" src="js/jquery-1.7.1.min.js" ></script>
<script>
$(document).ready(function(){
//隱藏二級三級菜單
$(".twobox").hide()
$(".three").hide()
//鼠標移動到包含二級菜單的一級菜單時顯示
$(".one>li").mouseover(function(){
$(this).find(".twobox").slideDown(500)
})
//鼠標移除時隱藏
$(".one>li").mouseleave(function(){
$(this).find(".twobox").slideUp(500)
});
//當鼠標移動到包含三級菜單的二級菜單時顯示
$(".two").mouseover(function(){
$(this).find(".three").slideDown(500)
})
//當鼠標移除時隱藏
$(".two").mouseleave(function(){
$(this).find(".three").slideUp(500)
})
})
//.find()遍歷 .mouseover鼠標移動 .mouseleave鼠標移除 .slideDown()滑動方式 .slideUp()滑動方式隱藏
//老師你好 為什么我寫出來的在滑動的那一瞬間有些卡頓
//總結 在html方面出現(xiàn)卡殼 浪費了很多時間 在jQuery方面比較穩(wěn)定
</script>
</head>
<body>
<div class="menu">
<ul class="one">
<li>首頁</li>
<li>木葉
<ul class="twobox">
<li>猿飛一族</li>
<li class="two">千手一族
<ul class="three">
<li>大筒木阿修羅</li>
<li>千手柱間</li>
<li>千手扉間</li>
<li>千手繩樹</li>
</ul>
</li>
<li class="two">宇智波一族
<ul class="three">
<li>大筒木因陀羅</li>
<li>宇智波斑</li>
<li>宇智波泉奈</li>
<li>宇智波佐助</li>
</ul>
</li>
<li>奈良一族</li>
</ul>
</li>
<li>巖忍
<ul class="twobox">
<li>塵</li>
<li class="two">影
<ul class="three">
<li>初代</li>
<li>二代</li>
<li>三</li>
<li>空</li>
</ul>
</li>
<li class="two">熔
<ul class="three">
<li>路人甲</li>
<li>路人乙</li>
<li>路人丙</li>
<li>路人丁</li>
</ul>
</li>
</ul>
</li>
<li>沙忍</li>
<li>霧忍</li>
<li>云忍</li>
</ul>
</div>
</body>
</html>
Correcting teacher：天蓬老師Correction time：2018-11-27 17:54:20
Teacher's summary：下級下拉菜單的要點是判斷當前的狀態(tài),智能分析用戶的行為,對jquery的常用事件要多多熟悉