• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

jQuery实现二级下拉菜单代码示例

jQuery 程序员 2年前 (2019-01-21) 115次浏览 已收录 0个评论

介绍一段代码实例,它实现点击出现二级下拉菜单的效果。

代码实例如下:

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

(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实现二级下拉菜单代码示例》的代码,若要看代码效果请大家点击“运行代码”按钮。

[code]<!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <meta name=”author” content=”http://www.gaodaima.com/&#8221; /> <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>[/code]


喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址