撤銷預先調整與jQuery窗口調整大小

Question

我目前有這個jQuery預先如果窗口是一定的大小。

if ($(window).width() < 480) { 

    $('nav').css("display","none"); 

    $('#container').prepend('<div id="nav-btn"></div>'); 
} 

我如何得到這個「不斷」檢查和隱藏<div id="nav-btn"></div>瀏覽器被調整時？

編輯：我希望它，當窗口寬度然後達到481px的<nav>元素設置爲display:block;和#nav-btn是隱藏的。但是動態的，所有這些都可以在調整大小後調整大小，而不僅僅是一次。

Answer 1

下達到你的要求（只要我可以告訴）：

$(window).resize(function() { 
    if ($(window).width() < 482){ 
     $('nav').css("display","none"); 
     if (!$('#nav-btn').length){ // makes sure there's only ever one nav-button div 
      $('<div />', {'id' : 'nav-btn'}) 
       .text('This is text, in the nav button') 
       .appendTo($('#container')); 
     } 
    } 
    else { 
     $('nav').css('display','block'); 
     $('#nav-btn').remove(); 
    } 
}); 

$(document).ready(
    function(){ 
     $(window).trigger('resize'); // making sure the resize stuff happens on DOMReady 
    });​ 

JS Fiddle demo。

參考文獻：

• appendTo()。
• text()。
• trigger()。

Answer 2

$(window).resize(function(){ 
    if ($(window).width() >= 481) { 
     $("#nav-btn").remove(); 
     $("nav").css("display", "block"); 
    } 
}); 

Answer 3

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

http://api.jquery.com/resize/

時的瀏覽器窗口的大小更改resize事件被髮送到窗口元素：