jq三级下拉菜单
温度。2019-04-09 22:02:49126<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo练习jq</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;text-decoration: none;}
.box{width: 300px;height: 300px;background: #ff0;position: absolute;}
nav{width: 500px;height:40px;line-height:40px;background-color: #666;margin: 50px auto;clear: both;}
nav li{ float: left;color: #fff;background-color: #666;text-align: center;width: 100px; }
.two{position: relative;}
.three{position: absolute;left:100px;top: 50px; }
</style>
</head>
<body>
<!-- 三级下拉菜单 -->
<nav>
<ul class="one">
<li>首页</li>
<li>视频教程
<ul class="two">
<li>视频一</li>
<li>视频二
<ul class="three">
<li>三级</li>
<li>三级</li>
<li>三级</li>
</ul>
</li>
<li>视频三</li>
</ul>
</li>
<li>社区问答</li>
<li>技术文章</li>
</ul>
</nav>
<script type="text/javascript">
$(function(){
// 三级下拉菜单
$('.two').hide();
$('.three').hide();
//指向显示二级
$('.one>li').mouseover(function(){
$(this).find('.two').slideDown(500);
})
//指向二级显示三级
$('.two>li').mouseover(function(){
$(this).find('.three').slideDown(500);
})
//离开隐藏二级
$('.one>li').mouseleave(function(){
$(this).find('.two').slideUp(500);
})
//离开二级隐藏三级
$('.two>li').mouseleave(function(){
$(this).find('.three').slideUp(500);
})
})
</script>
</body>
</html>