你的位置:首页 > Java教程

[Java教程]jquery实现的点击二级下拉导航菜单


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/