凝结jQuery的鼠标悬停和鼠标移开

想象我有这样的HTML代码段4倍以上的菜单导航凝结jQuery的鼠标悬停和鼠标移开

<ul class="navigation"> 
    <li class="nav-Mens"><a href="#">Mens</a></li> 
    <li class="nav-Womens"><a href="#">Womens</a></li> 
    <li class="nav-Kids"><a href="#">Kids</a></li> 
    <li class="nav-Gear"><a href="#">Gear</a></li> 
</ul> 
    <div id="Gear"> 
    <ul class="Gear"> 
    <table width="300" border="0" cellspacing="5" cellpadding="0"> 
     <tbody><div style="background-color:#333; color:#000">SHOP GEAR</div> 
     <tr> 
     <td><a href="#"><b>Snow</b></a> 
     <p></p> 
      <li><a href="#">Bags</a></li></td> 
     <td><a href="#"><b>Surf</b></a> 
     <p></p> 
      <li><a href="#">Towels</a></li></td> 
     </tr> 
    </tbody></table> 
    </ul> 
</div>

的四个不同的部分和我的jQuery看起来像这样

// JavaScript Document 
$(document).ready(function() { 

//Mens 
$("li.nav-Mens").mouseover(function() { 
    clearTimeout(timeout); 
    $('#Mens').show(); 
    $('#Womens').hide(); 
    $('#Kids').hide(); 
    $('#Gear').hide(); 
}); 
var timeout; 
$("li.nav-Mens").mouseout(function() { 
    timeout = setTimeout('hideMens()', 1000); 
}); 
$('#Mens').mouseover(function() { 
    clearTimeout(timeout); 
}); 
$('#Mens').mouseout(function() { 
    timeout = setTimeout('hideMens()', 1000); 
}); 

//Womens 
$("li.nav-Womens").mouseover(function() { 
    clearTimeout(timeout); 
    $('#Womens').show(); 
    $('#Mens').hide(); 
    $('#Kids').hide(); 
    $('#Gear').hide(); 
}); 
var timeout; 
$("li.nav-Womens").mouseout(function() { 
    timeout = setTimeout('hideWomens()', 1000); 
}); 
$('#Womens').mouseover(function() { 
    clearTimeout(timeout); 
}); 
$('#Womens').mouseout(function() { 
    timeout = setTimeout('hideWomens()', 1000); 
}); 

//Kids 
$("li.nav-Kids").mouseover(function() { 
    clearTimeout(timeout); 
    $('#Womens').hide(); 
    $('#Mens').hide(); 
    $('#Kids').show(); 
    $('#Gear').hide(); 
}); 
var timeout; 
$("li.nav-Kids").mouseout(function() { 
    timeout = setTimeout('hideKids()', 1000); 
}); 
$('#Kids').mouseover(function() { 
    clearTimeout(timeout); 
}); 
$('#Kids').mouseout(function() { 
    timeout = setTimeout('hideKids()', 1000); 
}); 

//Gear 
$("li.nav-Gear").mouseover(function() { 
    clearTimeout(timeout); 
    $('#Womens').hide(); 
    $('#Mens').hide(); 
    $('#Kids').hide(); 
    $('#Gear').show(); 
}); 
var timeout; 
$("li.nav-Gear").mouseout(function() { 
    timeout = setTimeout('hideGear()', 1000); 
}); 
$('#Gear').mouseover(function() { 
    clearTimeout(timeout); 
}); 
$('#Gear').mouseout(function() { 
    timeout = setTimeout('hideGear()', 1000); 
}); 

}); 
//Calling all the functions to hide everything 
function hideMens() { 
    $('#Mens').hide(); 
} 
function hideWomens() { 
    $('#Womens').hide(); 
} 
function hideKids() { 
    $('#Kids').hide(); 
} 
function hideGear() { 
    $('#Gear').hide(); 
}

任何想法如何使jquery有点小，但更小？

来源

2009-08-14 Casey Becking

这是我想出了为JavaScript：

<script type="text/javascript"> 
// JavaScript Document 
$(document).ready(function() { 
var timeout; 
$("ul.navigation li").mouseover(function(){ 
     var $showDiv = $(this).attr("class").substr(4); 
     $("#categories > div").each(function(){ 
       if($(this).attr("id")==$showDiv){ 
       $(this).show(); 
      } 
      else 
      { 
      $(this).hide(); 
      } 

    }); 
}); 
$("ul.navigation li").mouseout(function(){ 
var $showDiv = "#" + $(this).attr("class").substr(4); 
    $("#categories > div").each(function(){ 
       if($(this).attr("id")==$showDiv){ 
       $(this).hide(); 
      } 

     }); 
}); 

$("#categories > div").mouseover(function(){ 
clearTimeout(timeout); 
}); 

$("#categories > div").mouseout(function(){ 
$currentDiv = $(this).attr("id"); 
switch($currentDiv){ 
case "Mens": timeout = setTimeout('hideMens()', 1000); break; 
case "Gear": timeout = setTimeout('hideGear()', 1000); break; 
case "Kids" : timeout = setTimeout('hideMens()', 1000);break; 
case "Womens" : timeout = setTimeout('hideWomens()', 1000);break; 
} 
}); 

}); 

//Calling all the functions to hide everything 
function hideMens() { 
    $('#Mens').hide(); 
} 
function hideWomens() { 
    $('#Womens').hide(); 
} 
function hideKids() { 
    $('#Kids').hide(); 
} 
function hideGear() { 
    $('#Gear').hide(); 
} 

</script>

为HTML我包的div的ID为“类别”

来源

2009-08-14 20:57:39 krishna

非常感谢！ – 2009-08-14 21:18:42

如果你担心带宽：

Gzip已它

如果你担心执行时间：

简介它并认识到它是没有区别

来源

2009-08-14 18:01:07

可维护性如何？这并不总是关于表现。 – 2009-08-14 21:14:27

如果某些绑定调用相同的闭包，则可以将它们组合起来。

从

$("li.nav-Mens").mouseout(function() { 
    timeout = setTimeout('hideMens()', 1000); 
}); 


$('#Mens').mouseout(function() { 
    timeout = setTimeout('hideMens()', 1000); 
});

到

$('li.nav-Mens, #Mens').mouseout(function() { 
    timeout = setTimeout('hideMens()', 1000); 
});

和

$('#Mens, #Womens, #Kids, #Gear').mouseover(function() { 
    clearTimeout(timeout); 
}

）;

来源

2009-08-14 18:02:02 gapple

只是fyi，你可以使用'setTimeout（hideMens，1000）'并且避免丑陋的字符串方法的语法 – 2009-08-14 21:15:08

而且另一个div jQuery有事件绑定的函数（ “绑定”），其通常是最好的路要走：

$('li.nav-Mens, #Mens').bind("mouseout", function() { 
    timeout = setTimeout('hideMens()', 1000); 
});

你可以在这里读到它 - http://docs.jquery.com/Events/bind#typedatafn

来源

2009-08-14 21:00:08

凝结jQuery的鼠标悬停和鼠标移开

回答

相关问题