Jquery制作常用二级菜单导航
自己手动写一个常用的Jquery二级导航下拉菜单效果。
注意点：
1、鼠标到二级的时候要加个定时器来处理中间间隙问题；
2、鼠标进入和离开都要清楚定时器，不然会出现内存泄漏。
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用二级菜单导航</title>
<script>
</script>
<style>
*{ margin: 0; padding: 0; }
a{ text-decoration: none; }
li{ list-style: none; }
ul{ width: 400px; margin: 60px auto; }
ul li{ position: relative; display: inline-block; }
ul li > a{ padding: 4px 15px; font-size: 16px; color: #444; font-weight: bold; }
.subnav{ display: none; position: absolute; left: 15px; top: 22px; width: 200px; }
ul li.open .subnav{ display: block; }
</style>
</head>
<body>
<ul class="nav">
<li><a href="#">首页</a></li>
<li>
<a href="javascript:;" class="o">关于我们</a>
<div class="subnav">
<p><a href="#">企业介绍</a></p>
<p><a href="#">求职招聘</a></p>
<p><a href="#">团队人员</a></p>
</div>
</li>
<li>
<a href="javascript:;" class="o">产品中心</a>
<div class="subnav">
<p><a href="#">前端开发</a></p>
<p><a href="#">php工程师</a></p>
<p><a href="#">c++开发妹子</a></p>
</div>
</li>
<li><a href="#">联系我们</a></li>
</ul>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var o =null;
$('.nav li .o').on('mouseover', function() { // 鼠标移动到a上面。给当前添加class
var _that = this;
var subli = $(_that).parents('li');
$('.nav>li').removeClass('open'); //清除原来li上面的class
subli.addClass('open'); //添加当前class
clearTimeout(o); //鼠标移动到另外的a上面需要清除上一个的定时器
});
$('.nav li .o,.nav li .subnav').on('mouseout', function() {
//当鼠标移开a区域，由于有间隙bug。
//当鼠标离开二级目录区域，添加定时器隐藏当前li的class
var _that = this;
var subli = $(_that).parents('li');
o = setTimeout(function(){
subli.removeClass('open');
}, 100);
});
$('.nav li .subnav').on('mouseover', function(e) { //当鼠标移动到二级目录清除上面的定时器。
clearTimeout(o);
});
});
</script>
</html>
效果
浙公网安备 33010602011771号