響應式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沒有檢測到寬度。

來源

2014-10-16 user2586633

的'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 
});

來源

2014-10-16 09:53:47 Satpal

這是我正在尋找的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(); 
} 
});

來源

2014-10-16 09:51:09

感謝這工作。爲什麼它比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(); 
    } 

});

來源

2014-10-16 09:51:36 Jerodev

響應式jquery無法正常工作

回答

相關問題