                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /JS实现京东无延迟菜单效果

有没有人发现一个BUG

鼠标刚进入一级菜单还没碰到家用电器的时候，二级菜单就出现了。这个时候二级菜单是空的，怎么消除这个BUG啊

慕九州8359234

2017-12-14

源自：JS实现京东无延迟菜单效果 4-2

关注问题我要回答

2040

操作

收起

7 回答

慕移动9181930
2022-03-26

test ==== gt; test lt;br/gt; test一个绝对定位，一个是固定定位。。。f i x e d 在 i e 6 下不支持。。。。

0 回复有任何疑惑可以回复我~

收起回答

浅芷初夏
2018-12-26

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

0 回复有任何疑惑可以回复我~

收起回答

javren_撒野
2018-07-31

$("#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完美解决。体验感好些了。

0 回复有任何疑惑可以回复我~

收起回答