javascript - 响应式 JS - 调整窗口大小时出现问题

Question

我有一些 JavaScript，我只想在屏幕尺寸超过 900 像素时运行。所以我有这个:

if (document.documentElement.clientWidth > 900) {
 $('.menu-item-2477').hover(

 function () {
     $('.menu-item-2477 ul').css({
         display: 'block'
     });
     $('.menu-item-2477 ul').animate({
         height: '100px'
     }, 200);
 },

 function () {
     $('.menu-item-2477 ul').animate({
         height: '0px',
     }, 200, function () {
         $('.menu-item-2477 ul').css({
             display: 'none'
         });
     });
 });
}

当您加载页面时，这可以正常工作，但是如果您更改窗口大小，它会忽略 if 语句。我知道我应该执行某种调整大小功能，例如将整个内容包装在

中

$(window).resize(function(){ }

但是当我尝试时，这不起作用。那么调整窗口大小后我该怎么做才能使其正常工作呢？

Answer 1

将其包装在 $(window).resize(function(){}) 中是行不通的，因为您将在悬停时多次绑定(bind)处理程序。

您可以做的是将 document.documentElement.clientWidth > 900 逻辑移动到 hover 处理程序的内部。所以它看起来更像

$('.menu-item-2477').hover(
    //Hover in function
    function(){
        if (document.documentElement.clientWidth > 900) {
            ...
        }
    },
    //Hover out function
    function(){
        if (document.documentElement.clientWidth > 900) {
            ...
        }
    }
});

这样它将检查每个事件的窗口大小，并基于此执行不同的逻辑。调整窗口大小时不会发生任何事情，因为它仅在需要知道时进行检查。