[圧縮のjQueryのmouseOverとマウスアウト

Question

私は、このHTMLスニペットを持って4つの異なるメニューナビゲーションのセクション

<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のためのオーバー4回を想像してみて、この

// 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は少し小さいですが？あなたは、帯域幅を心配している場合

Answer 1

これは、私はjavascriptのため 思い付いたものです：HTML用

<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> 

私はまた、ID「カテゴリ」で、別のdiv要素に

Answer 2

：

• をGzipそれあなたが実行時間を心配している場合

：

• がそれをプロファイリングし、それが何をすることを実現していません差

Answer 3

バインディングの一部は、同じクロージャを呼び出す場合に組み合わせることができます。

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

と

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

に

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


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

から

）。

Answer 4

をdivを包み、jQueryのは、（結合事象のための機能を持っています「バインド」）それは通常、行くための最良の方法です：

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

あなたがここでそれについて読むことができます - http://docs.jquery.com/Events/bind#typedatafn

を