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方面出现卡壳 浪费了很多时间 在jQuery方面比较稳定
</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：下级下拉菜单的要点是判断当前的状态,智能分析用户的行为,对jquery的常用事件要多多熟悉