jQueryを使ってウィンドウの先頭に戻す

Question

ウィンドウが特定のサイズの場合は、前にこのjQueryの先頭にdivが追加されています。

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イベントは、ブラウザウィンドウのサイズが変更時にウィンドウ要素に送信されます。