JQuery меню: наведение мыши / мышеловка мышиный / мышиный сумасшествие - PullRequest
Новая
       8

JQuery меню: наведение мыши / мышеловка мышиный / мышиный сумасшествие

1 голос
/ 16 апреля 2009

Я пытаюсь создать простое меню, в котором элементы меню первого уровня представляют собой элементы li, а второй уровень - блоки ul со своими собственными элементами li. Ничего особо яркого. Css содержит display: none для всех подменю, и моя (оптимистичная) идея состояла в том, чтобы просто показать правильные элементы ul при наведении мыши на записи первого уровня, а затем скрыть их при наведении мыши на SUBmenu (элемент ul). У меня есть некоторые проблемы, чтобы понять, что случилось. В Firefox все хорошо, и последовательность действий: войти в меню первого уровня - войти в подменю - выйти из подменю показывает, что сработала правильная последовательность событий: menuOn subMenuOn subMenuOff menuOff. Я не могу понять, почему в IE в той же последовательности событий subMenuOff запускается внезапно после subMenuOn: в результате подменю немедленно исчезает. Это похоже на то, как пара (subMenuOn subMenuOff) была запущена в одно и то же время, отключив подменю. Без изменений при наведении мыши или вводе мыши. Использование парения не меняет ситуацию. Есть представление о том, что случилось? Это код: 

   $(document).ready(
        function(){ 
        enableMenu();                           
    }
);

var flagOnSubMenu = false;

function enableMenu(){ 
    $('li.menu').bind('mouseenter', menuOn);            
    $('li.menu').bind('mouseleave', menuOff);           
    $('ul.sottomenu').bind  ('mouseenter', subMenuOn);  
    $('ul.sottomenu').bind  ('mouseleave', subMenuOff); 
}

function menuOn(){ 
    scrivi('menuOn');
    if (flagOnSubMenu){
        scrivi('noAction');
        return;
    }

    var subMenuId;

$('ul.sottomenu').hide();                                            
        subMenuId = $(this).find("ul").attr('id');
        $('#' + subMenuId ).show();


}

function menuOff(){
    scrivi('menuOff<br>');
    return;
}

function subMenuOn(){
    scrivi('subMenuOn');
    flagOnSubMenu = true;
}

function subMenuOff(){ 
    scrivi('subMenuOff');
    flagOnSubMenu = false;
    $(this).hide();             
}

function scrivi(arg){ 
    $('#debug').html( $('#debug').html() + ' ' + arg );
}

Ответы [ 2 ]

3 голосов
/ 16 апреля 2009

У меня были некоторые сумасшедшие проблемы с событиями mouseover и mouseout. 

$("#menu>li").hover(
    function(){
        $("#menu *:animated").stop(true,true).hide(); //stop the madness
        $('ul',this).slideDown();
    },
    function(){
        $('ul',this).slideUp("fast");
    }
);

Остановка анимации была для меня ключом. Без этого анимации продолжали бы срабатывать еще долго после того, как я закончил наводить курсор на свое меню.

1 голос
/ 16 апреля 2009

Некоторые браузеры / фреймворки «всплывают», а некоторые нет.

т.е. (Я не уверен, каким путем это обернется браузерами AFA) Один браузер будет запускать указатель мыши при перемещении мыши от элемента к дочернему элементу. Другой не будет, но будет вызывать наведение мыши, которое также может быть перехвачено родительским элементом.

...