摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>三级下拉框</title> <script type="text/javascript" src="jquery
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三级下拉框</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style>
*{margin:0px;padding:0px;}
.menu{
width:760px;
height:50px;
background: pink;
margin:20px auto;
border:1px solid #ccc;
border-radius: 5px;
color:#fff;
}
ul{
list-style: none;
}
ul li{
width:150px;
float:left;
font-size: 25px;
height:50px;
line-height: 50px;
border:1px solid #888;
text-align: center;
cursor: pointer;
}
.two li{
width:150px;
height:40px;
line-height: 40px;
background: pink;
position: relative;
border:1px solid #fff;
font-size:20px;
cursor:pointer;
}
.three{position: absolute;top:0;left:150px;}
.three>li{
width:150px;
height:35px;
line-height: 35px;
background: pink;
}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
//隐藏二级与三级下拉菜单
$('.two').hide()
$('.three').hide()
//当鼠标移动到包含二级菜单的一级菜单时显示当前二级菜单
$('.one>li').mouseover(function(){
$(this).find('.two').slideDown(1000)
})
//当鼠标移出包含二级菜单的一级菜单时隐藏当前二级菜单
$('.one>li').mouseleave(function(){
$(this).find('.two').slideUp(1000)
})
//当鼠标移动到包含三级菜单的二级菜单时显示当前三级菜单
$('.two_1').mouseover(function(){
$(this).find('.three').slideDown(500)
})
//当鼠标移出包含三级菜单的二级菜单时隐藏当前三级菜单
$('.two_1').mouseleave(function(){
$(this).find('.three').slideUp(500)
})
})
</script>
<div class="menu">
<ul class="one"> <!-- 一级下拉菜单 -->
<li>首页</li>
<li>产品
<ul class="two"> <!-- 二级下拉菜单 -->
<li>产品1</li>
<li class="two_1">产品2
<ul class="three"> <!-- 三级下拉菜单 -->
<li>产品2.1</li>
<li>产品2.2</li>
<li>产品2.3</li>
<li>产品2.4</li>
</ul>
</li>
<li>产品3</li>
<li>产品4</li>
</ul>
</li>
<li>公司新闻
<ul class="two">
<li>新闻1</li>
<li class="two_1">新闻2
<ul class="three">
<li>新闻2.1</li>
<li>新闻2.2</li>
<li>新闻2.3</li>
<li>新闻2.4</li>
</ul>
</li>
<li>新闻3</li>
<li>新闻4</li>
</ul>
</li>
<li>行业新闻</li>
<li>联系我们</li>
</ul>
</div>
</body>
</html>
在写二级下拉框的时候要使用相对定位
position:relative;
在写三级下拉框的时候要使用绝对定位
position:absolute;
mouseover() 当鼠标指针位于元素上方时会发生mouseover事件
mouseleave() 当鼠标指针离开元素时会发生mouseleave事件
slideDown([speed][fn]) 下滑效果
slideUp([speed][fn]) 上滑效果
批改老师：天蓬老师批改时间：2018-11-28 23:59:58
老师总结：jQuery中通过几个简单的方法,就可以实现原生js中,需要写的大量代码,正好体现了jquery的设计思想: 写得少,做得多
