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

.. works great but looks really ugly, is it possible to compress this in fewer lines?

Many thanks for your help.

Answer 1

Maybe:

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

Based on http://api.jquery.com/hover/ (last example).

The use of “stop” is to avoid problems like here http://forum.jquery.com/topic/hover-and-toggleclass-fail-at-speed

Leave me a comment if it doesn’t work.