帮助重构jQuery菜单

$('#menu > li').hover(function() { 
     $(this).prev().addClass('nobg'); 
    }, function() { 
     $(this).prev().removeClass('nobg'); 
    }); 
    $('#menu > li:has(.submenu)').hover(function() { 
     $(this).addClass('active').children('ul').show(); 
     $(this).prev().addClass('nobg'); 
    }, function() { 
     $(this).removeClass('active').children('ul').hide();  
     $(this).prev().removeClass('nobg'); 
    });

..工程很好，但看起来真的很丑，是否有可能用较少的行压缩这个？帮助重构jQuery菜单

非常感谢您的帮助。

来源

2011-05-04 3zzy

不要对自己这么辛苦，这是非常简洁的IMO :) – HurnsMobile 2011-05-04 14:53:47

请发布此HTML ...我可以验证一个解决方案。 – 2011-05-04 15:03:59

你可以发布http://jsfiddle.net所需的最小代码来显示你的工作菜单吗？ – mellamokb 2011-05-04 15:08:16

可能：

$('#menu > li').hover(function() { 
    $(this).prev().stop(true, true).toggleClass('nobg'); 
}); 
$('#menu > li:has(.submenu)').hover(function() { 
    $(this).toggleClass("active") 
     .children('ul').stop(true, true).toggle(); 
});

基于http://api.jquery.com/hover/（最后一个例子）。

使用“停止”是为了避免像这里http://forum.jquery.com/topic/hover-and-toggleclass-fail-at-speed

问题给我评论，如果它不能正常工作。

来源

2011-05-04 15:00:58 Meligy

另外，您可能想尝试从第一个方法中删除“停止”，因为您不会执行动画或任何需要那么长时间的任何操作。并告诉我它是怎么回事 – Meligy 2011-05-04 15:05:45

我发现了代码中的错误，我从jQuery例子中复制了“next”。删除。现在看。 – Meligy 2011-05-04 15:08:24

我怀疑这不能只用CSS来实现......但

“悬停”有一个重载，只需要一个功能，这将要求这两个事件。此外，您可以使用toggleClass而不是添加和删除。

$('#menu > li').hover(function() { 
    $(this).prev().toggleClass('nobg'); 
}); 

$('#menu > li:has(.submenu)').hover(function() { 
    $(this).toggleClass('active').children('ul').toggle(); 
    $(this).prev().toggleClass('nobg'); 
});

上面的代码可能无法正常工作，但因为你会调用切换两次与子什么...我会用下面的代码试试。用当前的试用发布jsfiddle会非常有帮助。我可以验证它适用于你的情况:)或只是发布的HTML。

$(('#menu > li').hover(function() { 
    $(this).toggleClass('active').children('ul').toggle(); 
    $(this).prev().toggleClass('nobg'); 
});

另外，您的css能否确定孩子uls的知名度？

.active>ul 
{ 
    display:list-item; 
}

如果是这样，您可以搭乘“.children（'ul'）。toggle（）”在一起。

来源

2011-05-04 14:55:45

@mellamokb是的！对不起，:) :) – 2011-05-04 14:57:40

近乎成功！ :)'$（this）.prev（）。toggleClass（'nobg'）;'第二个函数内部不起作用。嗯... – 3zzy 2011-05-04 15:07:17

是的，它确实...但它也适用于第一个功能。因此，他们相互抵消。尝试使用上面的第二个代码片段... – 2011-05-04 15:11:17

添加到@ xixonia的解决方案，你可以从中分出功能分成不同的功能，这样的代码如下（未经测试）：

var nobgtoggle = function() { $(this).prev().toggleClass('nobg'); } 
var submenutoggle = function() { 
    $(this).toggleClass('active').children('ul').toggle(); 
    nobgtoggle(); 
}; 

$('#menu > li').hover(nobgtoggle); 
$('#menu > li:has(.submenu)').hover(submenutoggle);

来源

2011-05-04 14:59:53 mellamokb

帮助重构jQuery菜单

回答

相关问题