Question

我想在将鼠标悬停在用户上时显示一个菜单。但是当窗口大小低于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，但窗口大小调整在那里不起作用。我不确定我错过了什么..

Answer 1

使用：

$(document).width();

而不是：

$(window).width();

在事件的回调（mousehover）中使用条件$(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
	}
});

调整窗口大小时，鼠标悬停功能和鼠标左键功能保持工作

2 个答案: