0

divウィンドウが特定のサイズの場合、現在、この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非表示になるようにします。ただし、動的であるため、一度だけではなく、サイズ変更後のサイズ変更ですべて機能します。

4

3 に答える 3

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 フィドルのデモ。

参考文献:

于 2012-04-22T10:02:55.913 に答える
0 
$(window).resize(function(){
    if ($(window).width() >= 481) {
        $("#nav-btn").remove();
        $("nav").css("display", "block");
    }
});
于 2012-04-22T08:37:53.367 に答える
0 
$(window).resize(function() {
    // Type your code here
});

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

ブラウザウィンドウのサイズが変更されると、サイズ変更イベントがウィンドウ要素に送信されます。

于 2012-04-22T08:40:31.743 に答える