Question

    $('#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');
    });

..效果很好，但看起来很难看，是否有可能用更少的行来压缩它？

非常感谢你的帮助。

Answer 1

我怀疑这不能只用CSS做...但是......

“hover”有一个只有一个函数的重载，这个函数将被调用。此外，您可以使用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');
});

上面的代码可能不会工作，因为你会用子菜单调用两次forggles ...我会尝试使用下面的代码。发布一个jsfiddle与您当前的试用将非常有帮助。我可以验证它适用于您的情况:)或者只是发布html。

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

另外，你的CSS不能确定孩子的知名度吗？

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

如果是这样，你可以乘坐“.children（'ul'）。toggle（）”一起来。

Answer 2

也许：

$('#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

这样的问题

如果不起作用，请给我发表评论。

Answer 3

添加到@ 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);

帮助重构jQuery菜单

3 个答案: