想象一下,对于菜单导航的四个不同部分,我有 4 次以上的 HTML 片段
<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 为“categories”的 div 中
关于jquery - 压缩 jQuery mouseOver 和 mouseOut,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1279173/