如何在不刷新頁面的情況下如何執行此操作？

Question

我正在使用CSS媒體和JQuery構建一個響應式網站。

我創建了一個腳本來檢查頁面寬度：

if ($(window).width() < 1240) { 
$("#menu").toggle(); //hide menu 
    $('#body-wrap').toggleClass('shifted'); //puts the body width to 100% 
    $('#navbar').toggleClass('shifted'); //puts the navbar width to 100% 
} 

但是，當我刷新頁面驗證碼纔有效。

我該如何自動執行此操作？

謝謝。

Answer 1

將其置於resize事件中。

window.addEventListener('resize', function() { 
    // Your code 
}); 

你可能要考慮使用CSS來做到這一點，而不是，但（看看該媒體查詢）

Answer 2

你必須將它添加到onresize事件： https://developer.mozilla.org/en-US/docs/Web/API/Window.onresize

此事件將在每次調整窗口大小時被調用，以便您可以響應這些更改。

但我認爲一個更好的選擇是使用CSS媒體查詢，像這樣：

@media only screen 
and (max-device-width : 1240px) { 

    #menu { 
     display: none; 
    } 
} 

實例和信息上：不是的JavaScript http://css-tricks.com/snippets/css/media-queries-for-standard-devices/