手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆

jQuery 层隐藏

首页 > Javascript >

jQuery做二级菜单(模仿京东),非常方便,只需要hover就行了。
正好完成一个mouseover和mouseout就实现这个功能了,但是,如果菜单需要延迟关闭或者通过其他形式来关闭就有点不方便了。

现在网上的很多现成的,都是把子菜单层放在mouseover对象的层内。所以mouseover,mouseout的时候就不用担心了,只要over的时候show,out的时候hide就成了。

不过,我昨天接到的是分别处于两个不同的div,两个div是并级关系。。于是就写了以下代码。

JavaScript代码
  1. $(function(){  
  2.     $('.first_div li').hover(  
  3.         function(){  
  4.             var selId = $(this).index('.first_div li');  
  5.             var _self = this;  
  6.             t = setTimeout(function(){  
  7.                 $('img',_self).attr('src',$('img',_self).attr('src').replace('normal','lightened'));  
  8.                 $('#second_div').show();  
  9.                 $('.sub1_div:eq('+selId+')').show().siblings().hide();        
  10.             },250)  
  11.         },  
  12.         function(){  
  13.             $('img',this).attr('src',$('img',this).attr('src').replace('lightened','normal'));  
  14.             //$('#second_div').hide()  
  15.             clearTimeout(t);  
  16.         }  
  17.     );  
  18.     $('.absLeftMenu').mouseout(function(e){  
  19.         var e = e || window.event, relatedTarget = e.toElement || e.relatedTarget;  
  20.         while(relatedTarget && relatedTarget != this)  
  21.             relatedTarget = relatedTarget.parentNode;  
  22.         if(!relatedTarget)  
  23.             $('#second_div').hide();  
  24.     });  
  25.   
  26.   
  27.     $('.sub1_div li').mouseover(  
  28.         function(){  
  29.             $('#sub2_div').show().html($(this).children('ul').html());  
  30.         }  
  31.     )  
  32. })  
主要也是自己想做个笔记,在absLeftMenu的mouseout的时候,默认一下子就关闭了子层。这样就造成子层会一闪一闪。所以上了上面的代码。。。(抄来的)




本站采用创作共享版权协议, 要求署名、非商业和保持一致. 本站欢迎任何非商业应用的转载, 但须注明出自"易栈网-膘叔", 保留原始链接, 此外还必须标注原文标题和链接.

Tags: jquery, 隐藏层

« 上一篇 | 下一篇 »

只显示10条记录相关文章

JQuery -- this 和 $(this) 的区别 (浏览: 86406, 评论: 3)
[转载]超强大的jquery formValidator (浏览: 51803, 评论: 3)
jQuery插件---获取URL参数 (浏览: 47080, 评论: 1)
jQuery的html()等方法介绍 (浏览: 46511, 评论: 1)
取得html中的comment的内容 (浏览: 43334, 评论: 2)
jQuery的bind函数 (浏览: 41629, 评论: 1)
将Yiiframework与JQuery easyUI整合使用 (浏览: 39061, 评论: 2)
jQuery一些插件的链接[转] (浏览: 38633, 评论: 2)
取消radio的选中状态 (浏览: 37787, 评论: 1)
JQuery学习第一天 (浏览: 36335, 评论: 3)

发表评论

评论内容 (必填):