我正在尝试制作一个简单的菜单,其中第一级菜单条目是 li 元素,第二级是具有自己的 li 元素的 ul 块。没有什么特别亮的。CSS 包含display: none
对于所有子菜单,我的(乐观)想法只是在第一级条目上触发 mouseover 时显示正确的 ul 元素,而不是在 SUBmenu(ul 元素)上触发 mouseout 时隐藏它们。我有一些问题要理解发生了什么。在 Firefox 上一切都很好,动作顺序:进入一级菜单 - 进入子菜单 - 退出子菜单表明触发了正确的事件序列:menuOn subMenuOn subMenuOff menuOff。我不明白为什么在同一事件序列中的 IE 中 subMenuOff 在 subMenuOn 之后突然触发:结果是子菜单立即消失。这就像这对夫妇(subMenuOn subMenuOff)被触发同时禁用子菜单。使用 mouseover 或 mouseenter 没有任何变化。使用悬停不会改变这种情况。对发生的事情有一些想法吗?
$(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);
}