jQuery实现仿淘宝下拉菜单
jQuery实现仿淘宝下拉菜单
首先分析下拉菜单，在淘宝中的商品导航中，将鼠标移入导航栏中显示下拉菜单，当鼠标移除导航栏是隐藏下拉菜单列表；所以很容易联想到使用到jQuery中的事件函数mouseover和mouseout。mouseout事件在鼠标从元素上离开后会触发。mouseover事件会在鼠标移入对象时触发。
首先写出HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>仿下拉菜单</title>
</head>
<body>
<div class="wrap">
<ul>
<li style="float:left;">
<a href="">一级菜单1</a>
<ul class="ul" style="display: block;">
<li><a href="">二级菜单22</a></li>
<li><a href="">二级菜单22</a></li>
<li><a href="">二级菜单22</a></li>
</ul>
</li>
<li style="float:left;">
<a href="">一级菜单1</a>
<ul class="ul" style="display: block;">
<li><a href="">二级菜单22</a></li>
<li><a href="">二级菜单22</a></li>
<li><a href="">二级菜单22</a></li>
</ul>
</li>
<li style="float:left;">
<a href="">一级菜单1</a>
<ul class="ul" style="display: block;">
<li><a href="">二级菜单22</a></li>
<li><a href="">二级菜单22</a></li>
<li><a href="">二级菜单22</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
写出css样式：
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.wrap {
width: 330px;
height: 30px;
margin: 100px auto 0;
padding-left: 10px;
background-color: chartreuse;
}
.wrap li {
background-color: cyan;
}
.wrap > ul > li {
float: left;
margin-right: 10px;
position: relative;
}
.wrap a {
display: block;
height: 30px;
width: 100px;
text-decoration: none;
color: #000;
line-height: 30px;
text-align: center;
}
.wrap li ul {
position: absolute;
top: 30px;
display: none;
}
</style>
引入jQuery：
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
分析写出jQuery：
<script>
$(function(){
$(".wrap>ul>li").mouseover(function(){
//获取li标签元素,并给li标签注册事件
$(this).children("ul").show();
//this获取到li标签元素,相当于$(".wrap>ul>li")，children("ul")相当于this的孩子集
});
$(".wrap>ul>li").mouseout(function(){
$(this).children("ul").hide();
});
});
</script>
效果图：