Question

我正在开发一个新的响应式网站，html和css已经完成，但JavaScript / Jquery没有。问题是jquery的响应部分工作不正确。

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

问题在于，在启用JavaScript并且包含Jquery和Jquery UI时，jquery不会检测宽度。

Answer 1

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

$(document).ready(function() {

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

});

Answer 2

使用媒体查询而不是javascript它非常简单实用。

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

Answer 3

您需要使用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
});

响应式jquery无法正常工作

3 个答案: