问题:我希望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;
}
});
});
以这种方式使用JS不是一个好主意。
你可以使用CSS根据屏幕大小使用媒体查询显示/隐藏元素。
@media (max-width: 768px) {
.navigation-hide {
display: none;
}
nav:hover .navigation-hide {
display: block;
}
}
你可以使用CSS过渡来实现渐变效果。
查看这个jsFiddle
.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;
}
应该使用CSS的媒体查询和效果来实现,参见https://jsfiddle.net/DTcHh/12782/
但是如果你坚持使用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;
}
};
注意:不要在另一个循环事件中实现任何事件处理程序(在你的例子中是resize()),除非您正在动态创建一个新元素或删除并重新附加一个事件。
使用if语句window.innerWidth !
$(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; } }); }});