Question

我有一些JavaScript，我只想在屏幕大小超过900px时运行。所以我有这个：

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(){})中无法正常工作，因为您在悬停时会多次绑定处理程序。

您可以做的是将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) {
            ...
        }
    }
});

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

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

1 个答案: