Javascript jQuery如果width小于767，则前面的代码将不起作用

问题：我希望if语句中的代码只有在屏幕宽度大于767px时才能工作，如果小于767px，那么前面的代码就不能工作，怎么做

jQuery：

$(document).ready(function() {
    $(window).resize(function() {
        if ($(document).width() > 767) {
    $('.navigation-hide').hide();

   $("nav").mouseenter(function() {    
       $('.navigation-hide').stop().fadeIn(500);       
   });

   $('nav').mouseleave(function() {    
        $('.navigation-hide').stop().fadeOut(500);         
   });
}
        else {
            break;
        }
    });

});

将if语句与 窗口宽度

    $(document).ready(function() {
if(window.innerWidth >= 767){
 $(window).resize(function() { if ($(document).width() > 767) { $('.navigation-hide').hide(); $("nav").mouseenter(function() { $('.navigation-hide').stop().fadeIn(500); }); $('nav').mouseleave(function() { $('.navigation-hide').stop().fadeOut(500); }); } else { break; } }); }});

---

以这种方式使用JS不是一个好主意

您可以使用CSS根据屏幕大小显示/隐藏元素

您可以使用CSS转换来实现淡入淡出效果

看看这个

---

应该使用CSS的媒体查询和效果来实现，请参见

但是，如果您坚持使用jQuery，那么请检查一下

$(document).ready(callbackReady);
$(window).resize(callbackResize);

var isWidthReady = false;
var callbackReady = function() {
    $("nav").mouseenter(function() {
        if(isWidthReady) {
            $('.navigation-hide').stop().fadeIn(500);     
        }           
    });
    $('nav').mouseleave(function() {
        if(isWidthReady) {
            $('.navigation-hide').stop().fadeOut(500);  
        }
    });
}
var callbackResize = function() {
    if ($(document).width() > 767) {
        $('.navigation-hide').hide();
        isWidthReady = true;
    }
    else {
        isWidthReady = false;
    }
};

注意：除非 您正在动态创建新元素或删除并重新附加事件

---

我不能使用媒体规则，因为我需要使用JS在元素悬停时平滑淡入或淡出。这段代码对我不起作用，但我不知道为什么，可能是我不能在这里使用break语句吗？这不是错误，代码不起作用，我认为break语句不应该在这里使用，但是我不知道确切的原因。你能不能也给我看看你的html，这样我就可以改进答案了？那么你的

“.navigation hide”

应该做什么呢？检查一下：jQuery代码应该只在屏幕宽度大于767px时工作，错误：如果屏幕上有移动版本的导航栏，那么尝试打开它，将鼠标光标移动到打开的区域，然后将光标移出该区域，然后你会看到我试图做的错误。恐怕你做错了，你应该只使用CSS的媒体查询，而不是window.resize。这里有一个有帮助的希望：）

.navigation-hide {
    position: absolute;
    left: -999em;
    top: 0;
    opacity: 0;
    transition: opacity 0.5s, left 0.5s 0.5s;
}

nav:hover .navigation-hide {
    left: 0;
    opacity: 1;
    transition: opacity 0.5s;
}

$(document).ready(callbackReady);
$(window).resize(callbackResize);

var isWidthReady = false;
var callbackReady = function() {
    $("nav").mouseenter(function() {
        if(isWidthReady) {
            $('.navigation-hide').stop().fadeIn(500);     
        }           
    });
    $('nav').mouseleave(function() {
        if(isWidthReady) {
            $('.navigation-hide').stop().fadeOut(500);  
        }
    });
}
var callbackResize = function() {
    if ($(document).width() > 767) {
        $('.navigation-hide').hide();
        isWidthReady = true;
    }
    else {
        isWidthReady = false;
    }
};