摘要:<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>三级下拉菜单测试</title>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>三级下拉菜单测试</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
*{margin: 0px;padding: 0px;}
ul{list-style:none;}
.menu{margin:5px auto;height:40px;width:800px;line-height:40px;background:#000;border:1px solid #ccc; border-radius:5px;}
ul li{width:100px;height:40px;line-height:40px;float:left;color:#fff;border-right:1px solid #fff;text-align:center;cursor:pointer;}
.twobox li {width: 100px;height: 40px;line-height: 40px;background: #2D2D2D;color: #A9A9A9; font-size: 14px;position: relative;border:0px;}
.twobox li:hover{background:#ccc;color:#fff;}
.threebox {position: absolute; top: 0px;left: 100px;}
.threebox li {width: 99px;height: 40px;line-height: 40px;border: 0;}
.threebox li:hover {background:#bbb;color:#fff;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('.twobox').hide()//隐藏二级菜单
$('.threebox').hide()//隐藏三级菜单
//li二级菜单显示
$('.one>li').mouseover(function(){
//$('.twobox').slideDown(500);不用find函数也能实现
$(this).find('.twobox').slideDown(500);
})
//鼠标移出后二级菜单隐藏
$('.one>li').mouseleave(function(){
//$('.twobox').slideDown(500);不用find函数也能实现
$(this).find('.twobox').slideUp(500);
})
//鼠标移入进入三级菜单
$('.two').mouseover(function(){
$('.threebox').slideDown(500);不用find函数也能实现
//$(this).find('.threebox').slideDown(500);
})
//鼠标移出隐藏三级菜单
$('.two').mouseleave(function(){
$('.threebox').slideUp(500);不用find函数也能实现
//$(this).find('.threebox').slideDown(500);
})
})
</script>
</head>
<body>
<div class="menu">
<ul class="one"><!-- 主导航一级菜单 -->
<li>首页</li>
<li>产品
<ul class="twobox">
<li>产品2.1</li>
<li class="two">产品2.2
<ul class="threebox">
<li>新产品3.1</li>
<li>新产品3.2</li>
<li>新产品3.3</li>
<li>新产品3.4</li>
</ul>
</li>
<li>产品2.3</li>
<li>产品2.4</li>
</ul>
</li>
<li>新闻</li>
<li>图片</li>
<li>关于</li>
</ul>
</div>
</body>
</html>重新整理了一下,不用find也能实现,是不是会有什么不好的后果。
批改老师:韦小宝批改时间:2018-11-26 13:48:06
老师总结:不会有什么!find的意思你能理解嘛,find也就相当于$('.twobox')啊!课后多多练习吧!