JQuery悬停问题与窗口调整大小答案

【问题标题】：JQuery hover issue with window resizeJQuery悬停问题与窗口调整大小
【发布时间】：2015-12-20 07:14:06
【问题描述】：

我有以下 jQuery：

var winWidth = 0;
$(window).resize(function() {
    winWidth = $(window).width();
    $(".home").hover(
        function () {
            $(".arrow-down").show();
            if (winWidth < 900) {
                $(".arrow-down").css("left", "70px");  
            }
            else {   
                $(".arrow-down").css("left", "100px");
            }
        },
        function () {
             $(".arrow-down").hide();
        }
    );
});

基本上，只要鼠标悬停在对象.home 上，就会显示一个arrow-down div。但我也想根据窗口的大小移动arrow-down 对象。代码工作正常，只有一个小问题发生，我无法弄清楚原因。如果我刷新屏幕，当鼠标悬停在对象.home 上时，arrow-down div 不会显示，但如果我调整屏幕大小，则该功能可以完美运行。

我猜测该函数仅在调整屏幕大小时调用，但我不希望这样，我希望在调整屏幕大小之前调用该函数。

我该如何解决这个问题？

【问题讨论】：

为什么不把悬停事件移到调整大小事件之外呢？
同时设置 var winWidth = $(window).width()

标签： jquery

【解决方案1】：

您是对的，您的函数仅在调整大小时调用 - 刷新或加载页面不会触发它。要同时触发您的函数，请更改：

$(window).resize(function() { /* your code here */ });

到：

$(window).on("load resize", function() { /* your code here */ });

See jQuery $.on for more info.

【讨论】：

【解决方案2】：

您的函数被 jquery 调用 $(window).resize 包围，该函数仅在调整窗口大小时才会被调用。尝试将$(".home").hover 调用移到$(window).resize 调用之外，并且仅在调整窗口大小时更新变量winWidth。

类似：

var winWidth = $(window).width();

$(window).resize(function() {
    winWidth = $(window).width();
});

$(".home").hover(
    function () {
        $(".arrow-down").show();
        if (winWidth < 900) {
            $(".arrow-down").css("left", "70px");  
        }
        else {   
            $(".arrow-down").css("left", "100px");
        }
    },
    function () {
        $(".arrow-down").hide();
    }
);

或者像 Damion Yeatman 说的你甚至不需要声明变量 winWidth，你只需要在需要获取窗口宽度的任何时候使用$(window).width(); 函数。

【讨论】：

【解决方案3】：

当您在悬停时运行函数时，您不需要检查窗口何时调整大小。

$(".home").hover(
    function () {
        $(".arrow-down").show();
        if ($(window).width() < 900) {
            $(".arrow-down").css("left", "70px");  
        }
        else {   
            $(".arrow-down").css("left", "100px");
        }
    },
    function () {
         $(".arrow-down").hide();
    }
);

希望这会有所帮助。

【讨论】：