jQuery与CSS二级下拉菜单
jQuery与CSS二级下拉菜单属于前端实例代码，有关更多实例代码大家可以查看。
本章节介绍一段代码实例，它实现点击出现二级下拉菜单的效果。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, dl, dt, dd{
padding:0;
margin:0;
}
li{list-style: none;}
img{border: none;}
u{text-decoration:none;}
em{font-style: normal;}
a{
color:#424242;
text-decoration:none;
outline:none;
blr:expression(this.onFocus=this.blur());
}
body{
font-size:12px;
word-break:break-all;
}
.box{
margin:0 auto;
text-align:left;
width:920px;
}
.clear{clear:both;}
.UpLayer{margin:100px;}
.UpLayer dl dt{
width:50px;
position:absolute;
z-index:3;
padding:0 5px;
line-height:20px;
}
.UpLayer02{
border:#ccc 1px solid;
border-bottom:none;
background:#f1f1f1;
margin:-1px 0 0 -1px;
}
.UpLayer dl dd{
width:80px;
position:absolute;
z-index:2;
border:#ccc 1px solid;
padding:5px;
line-height:20px;
background:#f1f1f1;
display:none;
margin:19px 0 0 -1px;
}
.UpLayer dl dd a{
display:block;
border-bottom: #ccc 1px dashed;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(document).ready(function(){
var objStr = ".UpLayer";
$(objStr).each(function(index){
$(this).click(function(){
$(objStr+" dd").show();
$(objStr+" dt").addClass("UpLayer02");
});
$(this).hover(function(){},function(){
$(objStr+" dd").hide();
$(objStr+" dt").removeClass("UpLayer02");
});
});
});
</script>
</head>
<body>
<div class="UpLayer">
<dl>
<dt><a href="javascript:void(0)">前端教程网</a></dt>
<dd>
<a href="#">css教程</a>
<a href="#">pipipi.net</a>
<a href="#">div教程</a>
<a href="#">js教程</a>
<a href="#">正则教程</a>
</dd>
</dl>
</div>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释：
（1）.$(document).ready(function(){})，当文档结构完全再去执行函数中的代码、
（2）.var objStr = ".UpLayer"，声明一个变量并赋值，这个值用作一个class选择器。
（3）.$(objStr).each(function(index){ })，使用each()方法遍历匹配集合中的元素。
（4）.$(this).click(function(){ }，为当前元素元素注册click事件处理函数。
（5）.$(objStr+" dd").show()，显示class属性值为UpLayer下的dd元素。
（6）.$(objStr+" dt").addClass("UpLayer02")，为class属性值为UpLayer下的dt元素添加UpLayer02样式类。
（7）.$(this).hover(function(){},function(){
$(objStr+" dd").hide();
$(objStr+" dt").removeClass("UpLayer02");
})，当鼠标离开的时候，隐藏dd元素，删除相应的样式类。
二.相关阅读:
（1）.each()参阅jQuery each()一章节。
（2）.addClass()参阅jQuery addClass()一章节。
（3）.removeClass()参阅jQuery removeClass()一章节。
jQuery与CSS二级下拉菜单，这样的场景在实际项目中还是用的比较多的，关于jQuery与CSS二级下拉菜单就介绍到这了。