慕九州8359234
2017-12-14 03:19
鼠标刚进入一级菜单还没碰到家用电器的时候,二级菜单就出现了。这个时候二级菜单是空的,怎么消除这个BUG啊
$(document).ready(function () {
var sub = $("#sub");
var activeRow, activeMenu;
$("#test").on("mouseenter",function (e) {
// sub.removeClass("none");
}).on("mouseleave",function (e) {
sub.addClass("none");
if(activeRow){
activeRow.removeClass("active");
activeRow = null;
}
if(activeMenu){
activeMenu.addClass("none");
activeMenu = null;
}
}).on("mouseenter","li",function (e) {
sub.removeClass("none");
if(!activeRow){
activeRow = $(e.target).addClass("active");
activeMenu = $("#" + activeRow.data('id'));
activeMenu.removeClass("none");
return;
}
activeRow.removeClass("active");
activeMenu.addClass('none');
activeRow = $(e.target);
activeRow.addClass("active");
activeMenu = $("#" + activeRow.data('id'));
activeMenu.removeClass("none");
});
});
这个其实也不算什么bug,你看到的空子菜单实际上就是它的padding造成的,你可以把padding这个css样式命令剥离出来,在鼠标移入li时addClass,移出li时removeClass。第二种方法比较简单,看图:

把那行代码写过来
$("#text")包含内层的ul,还有li,,,进入ul还没进入li时,也会触发下面的.on("mouseenter",function(e){
sub.removeClass("none")}),使得会出现#sub的样式,这个bug看着很难受,直接写成$("#text li")就行,让他进入Li触发,不过后面的事件委托的时候.on("mouseenter","li",function(e)前面就得加上$("#text")或者$("#text ul") 毕竟$("#text li")不能委托自己。小BUG完美解决。体验感好些了。
这是我的解决方案https://github.com/keyiwu/JD-Menu/releases/tag/1.1.1
还是不行,绑定li的话,离开一级菜单到二级菜单的时候,二级菜单会隐藏
我知道了,要绑定到li上
$('#test li')
JS实现京东无延迟菜单效果
57655 学习 · 146 问题
相似问题