标签：
jquery实现的点击二级下拉导航菜单:
二级下拉导航菜单是各种类型的网站都有使用，所以是一个必须掌握的技能，对于老手来说肯定是轻松加愉快，但是对于初学者来说未必如此，下面就通过代码实例详细介绍一下点击二级下拉菜单实现过程。
代码如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> *{ margin:0px auto; padding:0px; text-align:center; } ul{list-style:none;} ul li{ height:25px; line-height:25px; } .menu{ display:none; width:100px; border:1px solid gray; background:#00FFFF; } .dlHover{ position:absolute; z-index:9999; display:block; } .box{ border:1px solid gray; width:100px; background-color:#999999; font-size:12px; } .bg{background-color:#1F9999;} </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".box").click(function(){ $(".menu").addClass("dlHover"); }); $(".box").hover(function(){ $(this).addClass("bg"); },function(){ $(this).removeClass("bg"); $(".menu").removeClass("dlHover"); }); }); </script> </head> <body> <div class="box"> <span>蚂蚁部落</span> <div class="menu"> <ul> <li><a href="#">css教程</a></li> <li><a href="#">正则表达式</a></li> </ul> </div> </div> </body> </html>
上面的代码实现了简单的点击二级下拉菜单效果，下面介绍一下它的实现过程。
一.代码注释:
1.$(document).ready(function(){})，当文档结构完全加载完毕再去执行函数中的代码。
2.$(".box").click(function(){$(".menu").addClass("dlHover");})，为class属性值为box的元素注册click事件处理函数，当点击此元素的时候，会为二级下拉菜单添加class类，也就是讲二级下拉菜单设置为可见。
3.$(".box").hover()，为box元素注册hover事件处理函数，也就是规定当鼠标移入和离开的时候执行的函数。
4.function(){$(this).addClass("bg");}，当鼠标悬浮的时候，添加bg class类。
5.function(){$(this).removeClass("bg");$(".menu").removeClass("dlHover");})，当鼠标离开的时候，会删除bg和dlHover class类。
二.相关阅读:
1.addClass()函数可以参阅jQuery的addClass()方法一章节。
2.hover事件可以参阅jQuery的hover事件一章节。
3.removeClass()函数可以参阅jQuery的removeClass()方法一章节。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=14637
更多内容可以参阅:http://www.softwhy.com/jquery/
标签：
原文地址：http://www.cnblogs.com/zhengzebiaodashi/p/5182398.html
