撤销预先调整与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事件被发送到窗口元素：