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

Question

我有以下 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 不会显示，但如果我调整屏幕大小，则该功能可以完美运行。

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

如何解决这个问题？

Answer 1

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

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

至:

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

See jQuery $.on for more info.