手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表Tag:隐藏层

jQuery 层隐藏

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, 隐藏层