jQuery做二级菜单（模仿京东），非常方便，只需要hover就行了。
正好完成一个mouseover和mouseout就实现这个功能了，但是，如果菜单需要延迟关闭或者通过其他形式来关闭就有点不方便了。
现在网上的很多现成的，都是把子菜单层放在mouseover对象的层内。所以mouseover,mouseout的时候就不用担心了，只要over的时候show,out的时候hide就成了。
不过，我昨天接到的是分别处于两个不同的div，两个div是并级关系。。于是就写了以下代码。
JavaScript代码
- $(function(){
- $('.first_div li').hover(
- function(){
- var selId = $(this).index('.first_div li');
- var _self = this;
- t = setTimeout(function(){
- $('img',_self).attr('src',$('img',_self).attr('src').replace('normal','lightened'));
- $('#second_div').show();
- $('.sub1_div:eq('+selId+')').show().siblings().hide();
- },250)
- },
- function(){
- $('img',this).attr('src',$('img',this).attr('src').replace('lightened','normal'));
- //$('#second_div').hide()
- clearTimeout(t);
- }
- );
- $('.absLeftMenu').mouseout(function(e){
- var e = e || window.event, relatedTarget = e.toElement || e.relatedTarget;
- while(relatedTarget && relatedTarget != this)
- relatedTarget = relatedTarget.parentNode;
- if(!relatedTarget)
- $('#second_div').hide();
- });
- $('.sub1_div li').mouseover(
- function(){
- $('#sub2_div').show().html($(this).children('ul').html());
- }
- )
- })