凝结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有点小,但更小?
这是我想出了 为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为“类别”
如果你担心带宽:
- Gzip已它
如果你担心执行时间:
- 简介它并认识到它是没有区别
可维护性如何?这并不总是关于表现。 – 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);
}
);
只是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:18:42