響應JavaScript：「刷新」頁面取決於屏幕寬度？

我製作了一個水平菜單的響應式網站。我希望在達到較低的屏幕分辨率時將菜單切換爲下拉菜單。 jQuery的撥動工作正常，我想這對「讓它響應」：響應JavaScript：「刷新」頁面取決於屏幕寬度？

if (document.documentElement.clientWidth < 768) { 

    $(document).ready(function(e){ 

     $('#menubutton').on('click',function(){ 

      $('#main-nav').slideToggle(); 

     }); 

    }) 
}

這也工作正常，但不能在瀏覽器中直接更改windowsize - 我必須手動resfresh頁面加載腳本！

當達到所需的屏幕寬度（768 px）時，有沒有辦法「刷新」頁面？ ...反之亦然！

感謝名單，約亨

來源

2013-07-26 Jochen Schmidt

也許不是刷新在每個調整頁面，你可以這樣做：

var mainNavActivated = false; 
$(document).ready(function(e){ 
    $('#menubutton').on('click',function(){ 
     if(mainNavActivated || document.documentElement.clientWidth < 768){ 
      window.mainNavActivated=true; 
      $('#main-nav').slideToggle(); 
     } 
    }); 
})

這是無論如何約束力點擊使其工作時窗口是「窄」

來源

2013-07-26 10:10:00 daghan

嘿謝謝..這幾乎是我想要的..有可能通過調整窗口大小來使腳本「加載」到最大？現在菜單消失... –

因此，當您從狹窄的狀態最大化窗口時，打開的菜單消失了嗎？通過簡單地調整768寬度以上還是僅在最大化時才消失？ – daghan

不，菜單消失，當我加載腳本後，調整網站的高於768px的狀態。降低768px腳本被加載，我可以使用切換。但反之亦然：腳本仍然處於調整大小的「切換模式」！我希望這說清楚，英語不是我的母語;-) –

您可以使用$(window).resize()。每次窗口被用戶調整大小時，它都會調用你的函數。

來源

2013-07-26 10:02:20 Heart

您可以使用resize事件。的

$(window).resize(function() { 
    // here your code 
});

來源

2013-07-26 10:02:28

...我嘗試過，但現在的問題是：切換打開並關閉直到無窮大？！？！當我調整窗口的最大值時，菜單消失（腳本仍然加載）！？！ –

如果尺寸很小或很大，你應該檢查一次。如果它很小，你應該執行你的代碼，否則你應該執行回滾。你必須考慮這兩種情況。 –

window.onresize = function(event) { 
    if ($(window).width()< 768){ 
     // Do your stuff in here 
    } 
});

來源

2013-07-26 10:11:37 Anderscc

響應JavaScript：「刷新」頁面取決於屏幕寬度？

回答

相關問題