需求
当鼠标划过导航栏中某一菜单项时,显示其完整子菜单;鼠标移动出该菜单项及其对应的子菜单时,延迟0.5s子菜单消失。
思路
首先,将子菜单#sub-menu设置为display:none;并且在菜单项及其子菜单项的工头父元素#nav上绑定事件:
var nav = $("#nav");
nav.bind("mouseover", function () {
if (!nav.hasClass("show")) {
nav.addClass("show");
}
});
nav.bind("mouseout", function () {
setTimeout(function () {
nav.removeClass("show");
}, 500);
});
其中,.show #sub-menu{display:block};
问题
当鼠标移动到菜单项时,子菜单显示;移出后,子菜单0.5s后消失。但是,当鼠标移动到子菜单中的某一子菜单项时,绑定在#nav上的鼠标移入、移出事件会重复触发,导致.show不停添加、删除。经过研究,是因为子菜单项的鼠标事件冒泡导致。
最终解决
Jquery有两个事件分别对应无冒泡的鼠标移入、移出:mouseenter和mouseleave。
修改代码:
var nav = $("#nav");
nav.bind("mouseenter", function () {
if (!nav.hasClass("show")) {
nav.addClass("show");
}
});
nav.bind("mouseleave", function () {
setTimeout(function () {
nav.removeClass("show");
}, 400);
});
总结
这次问题比较简单,其实可以不解决。但是我这是在模仿别人页面时发现的区别,所以为了保证功能一致,就搜索了一下解决办法。以后开发的时候也要注意事件发生在冒泡和捕获阶段时的区别。