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

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) {
            ...
        }
    }
});

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