慕九州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实现京东无延迟菜单效果
57661 学习 · 138 问题
相似问题