Question

我正在尝试制作一个简单的菜单，其中第一级菜单条目是li元素，第二级是具有自己的li元素的ul块。没什么好亮的。对于所有子菜单，Css包含display：none，我的（乐观）想法只是在第一级条目上触发mouseover时显示正确的ul元素，然后在SUBmenu（ul元素）上触发mouseout时隐藏它们。我有一些问题需要了解发生了什么。在Firefox上一切都很好并且动作序列：在第一级菜单中输入 - 在子菜单中输入 - 从子菜单退出显示触发了正确的事件序列：menuOn subMenuOn subMenuOff menuOff。我无法理解为什么在IE中同一事件序列subMenuOff在subMenuOn之后突然被触发：结果是子菜单立即消失。就像这对夫妇（subMenuOn subMenuOff）在禁用子菜单的同时进行了trigegred。使用鼠标悬停或鼠标中心无法更改。使用悬停不会改变这种情况。对发生的事情有所了解？这是代码：

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

Answer 1

我遇到了鼠标悬停和鼠标移动事件的一些疯狂问题。

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

停止动画对我来说是关键。如果没有这个，动画会在我完成鼠标悬停在我的菜单上后继续射击。

Answer 2

有些浏览器/框架会冒泡事件，有些则没有。

即。（我不确定AFA浏览器的方向）当鼠标从元素移动到子元素时，一个浏览器将触发mouseout。另一个不会但会触发鼠标悬停，也可以被父元素捕获。

Jquery菜单：mouseover / mouseout moseenter / mouseleave craziness

2 个答案: