0

jQuery のmouseenterand mouseout(and mouseleave) に問題があります。私のコードは次のとおりです。

$('nav#mainMenu ul li:not(:first), nav#mainMenu ul li ul:not(li a)').each(function() {
    $(this).mouseenter(function() {
        $(this).children('a').addClass('active');
        var left = $(this).outerWidth(true),
            width = 0;
        if($(this).hasClass('help')) { // IF HELP
            $(this).prevAll('li').each(function() {
                width += $(this).outerWidth(true);
            });
        } else { // ELSE
            $(this).nextAll('li').each(function() {
                width += $(this).outerWidth(true);
            });
        }

        var width = width + 1;

        if($(this).hasClass('help')) {
            $(this).children('ul').css({ 'right':left, 'width':width });
            $(this).children('ul').stop().show('slide', { direction: 'right' }, 250);
        } else {
            $(this).children('ul').css({ 'left':left, 'width':width });
            $(this).children('ul').stop().show('slide', { direction: 'left' }, 250);
        }
    });
        $(this).mouseout(function() {
        if($(this).hasClass('help')) {
            $(this).children('ul').stop().hide('slide', { direction: 'right' }, 250, function() {
                $(this).parent('li').children('a').removeClass('active');
            });
        } else {
            $(this).children('ul').stop().hide('slide', { direction: 'left' }, 250, function() {
                $(this).parent('li').children('a').removeClass('active');
            });
        }
    });
});

アニメーションの最後にカーソルを置いたままにするとうまくいきますが、途中で離れるとmouseout起動せず、children('ul')まだ表示されます。何か案は？

slide編集: 「基本的な」jQueryメソッドではなく、jQueryUIのを使用することで問題が明らかに発生しています。唯一の問題は、どうにかして修正できるかということです。

4

1 に答える 1

-1

マウスオーバーとマウスアウトを1つの関数に入れて...のようにします。

$('nav#mainMenu ul li:not(:first), nav#mainMenu ul li ul:not(li a)').each(function() {
    $(this).hover(function() {
        $(this).children('a').addClass('active');
        var left = $(this).outerWidth(true),
            width = 0;
        if($(this).hasClass('help')) { // IF HELP
            $(this).prevAll('li').each(function() {
                width += $(this).outerWidth(true);
            });
        } else { // ELSE
            $(this).nextAll('li').each(function() {
                width += $(this).outerWidth(true);
            });
        }

        var width = width + 1;

        if($(this).hasClass('help')) {
            $(this).children('ul').css({ 'right':left, 'width':width });
            $(this).children('ul').stop().show('slide', { direction: 'right' }, 250);
        } else {
            $(this).children('ul').css({ 'left':left, 'width':width });
            $(this).children('ul').stop().show('slide', { direction: 'left' }, 250);
        }

        ,function() {
        if($(this).hasClass('help')) {
            $(this).children('ul').stop().hide('slide', { direction: 'right' }, 250, function() {
                $(this).parent('li').children('a').removeClass('active');
            });
        } else {
            $(this).children('ul').stop().hide('slide', { direction: 'left' }, 250, function() {
                $(this).parent('li').children('a').removeClass('active');
            });
        }
    });
});
于 2013-01-09T10:50:57.493 に答える