jQuery实现二级下拉菜单代码示例
介绍一段代码实例,它实现点击出现二级下拉菜单的效果。
代码实例如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.gaodaima.com/" /> <title>jQuery实现二级下拉菜单代码示例-搞代码gaodaima.com</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="#">gaodaima.com</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元素,删除相应的样式类。
本文案例为大家展示了《jQuery实现二级下拉菜单代码示例》的代码,若要看代码效果请大家点击“运行代码”按钮。
原创文章,转载请注明: 转载自搞代码
本文链接地址: jQuery实现二级下拉菜单代码示例

微信 赏一包辣条吧~

支付宝 赏一听可乐吧~
发表评论