凝結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的鼠標懸停和鼠標移開

回答

相關問題