0

ドキュメントの幅が470未満のときに、モバイルメニューのボタンを追加しようとしています。

ページが最初に読み込まれるときに実行されますが、ブラウザで実際のドキュメントの幅を変更しても、ドキュメントと一緒に変更されません。どうすればこれを達成できますか？

基本的に、ボタンは幅が470未満の場合に表示され、ページ幅が470を超える場合は消えます。

これが私のコードです。

        var width = $(document).width();
        if (width < 470) {
            $("<button id='menu'>Menu</button>").insertAfter("#navigation a img");
        } else {
            $("<button id='menu'></button>").hide();
        }
4

2 に答える 2

3

関数/チェックをresizeウィンドウ上のメソッドにバインドします。

$(window).resize(
    function(){
        /* do stuff in here */
    });

単純な概念実証。

于 2012-09-28T21:57:05.910 に答える
3

ウィンドウサイズを変更するたびに、ドキュメントの幅を確認してください。

function onresize(){
   var width = $(document).width();
   if (width < 470) {
        if($("#menu").length){
               $("#menu").show();
         }
         else{
                $("<button id='menu'>Menu</button>").insertAfter("#navigation a img");
         }
    } else {
        $("#menu").hide();
    }
}

onresize()//first call
$(window).resize(onresize);
于 2012-09-28T21:57:19.717 に答える