响应式jquery无法正常工作

问题描述：

我正在研究一个新的响应式网站，HTML和CSS已完成，但JavaScript/Jquery没有。问题是jQuery的响应部分不能正常工作。响应式jquery无法正常工作

$(document).ready(function() { 
if ($(window).width > 1023) { 
    $('#wrapper').hide(); 
} 
else { 
    $('#wrapper').show(); 
    $('#footer').hide(); 
} 
});

问题是，在启用JavaScript并且包含Jquery和Jquery UI的情况下，jquery没有检测到宽度。

的'jQuery对象的属性width' [是一个函数]（HTTP ：//api.jquery.com/width/）所以你必须这样使用'.width（）' – 2014-10-16 09:47:30

为什么不使用css的@ media-query来进行响应式设计？描述它如何不工作？当更改窗口大小时，您看不到任何效果，因为没有'$（window）.resize（）'事件 – Justinas 2014-10-16 09:47:32

@PatrickEvans好的，我不知道。谢谢！ – user2586633 2014-10-16 09:54:58

答

需要使用resize事件

例

//Use resize event 
$(window).resize(function() { 
    if ($(window).width() > 1023) { //Type width() is a function 
     $('#wrapper').hide(); 
    } 
    else { 
     $('#wrapper').show(); 
     $('#footer').hide(); 
    } 
}); 

$(document).ready(function() { 
    $(window).resize(); //Trigger resize event on page load 
});

这是我正在寻找的exatly。感谢您的帮助！ – user2586633 2014-10-16 10:03:45

答

使用media-query比javacript更加简单实用。

$(document).ready(function() { 
if (window.innerWidth > 1023) { 
    $('#wrapper').hide(); 
} else { 
    $('#wrapper').show(); 
    $('#footer').hide(); 
} 
});

感谢这工作。为什么它比if（$（document）.width？更好？他们都应该工作wright？ – user2586633 2014-10-16 09:56:26

答

width不是一个属性，它是一个返回数字的函数。你必须使用这样的：

$(document).ready(function() { 

    if ($(window).width() > 1023) { 
     $('#wrapper').hide(); 
    } 
    else { 
     $('#wrapper').show(); 
     $('#footer').hide(); 
    } 

});

响应式jquery无法正常工作

相关推荐