鼠标悬停功能和鼠标离开功能在调整大小时继续工作window

Question

我想在将鼠标悬停在用户上方时显示一个菜单。但是当 window 大小低于 977 时，我希望悬停消失。

这是我的代码：

$(document).ready(function() {
$(window).on("load resize", function(event){
    var windowSize = $(window).width();
    var timer;
    if (windowSize >= 977) {   
        $(".crmUser, .userMenu").on("mouseover", function() {
            clearTimeout(timer);
            openSubmenu();
        }).on("mouseleave", function() {
            timer = setTimeout(
              closeSubmenu
            , 800);
        });

        function openSubmenu() {
            $(".userMenu").addClass("userOpen").fadeIn("fast");
        }
        function closeSubmenu() {
            $(".userMenu").removeClass("userOpen").fadeOut("fast");
        }
    } else { }
    }).trigger("resize");    
});

我什至做了一个 fiddle，但是 window 调整大小在那里不起作用。我不确定我错过了什么..

Answer 1

使用：

$(document).width();

而不是：

$(window).width();

并在事件回调（鼠标悬停）中使用条件 $(document).width()>=977：

   $(".crmUser, .userMenu").on("mouseover", function() {
        if($(document).width()>=977){
            clearTimeout(timer);
            openSubmenu();
        }

    })

Answer 2

这很适合我

$(document).ready(function(e) {
    var oreientedWidth = document.body.clientWidth;
 if(oreientedWidth < 767){
   //use your code here
 }
});

鼠标悬停功能和鼠标离开功能在调整大小时继续工作window

Mouseover function and mouseleave function keeps working when resize window

html

css

jquery

jsfiddle