jqueryを使ってページが準備できたら（$（window）.ready（）など）、動作しないようです。

Question

私のhtmlページの内容を変更するにはjqueryを使用していますページ幅に合わせる。その後、ページが用意できたら（$(document).ready(function({\\there is some code here!}));を使って）、私はいくつかの関数を呼び出したい。
ページ幅が小さく（835px未満）、その代わりに他のものを置いているときに私のメインメニューを消したいです。また、ページのサイズ変更はこの目標にとって重要です。私はこれを行うには、このコードを使用します。

function deleteMainMenu(){ \t 
 
\t var width = $(window).width(); 
 
\t if(width <= 835){ \t \t 
 
\t \t $("#main-menu").empty(); \t \t 
 
\t \t $("#main-menu").append('add some html code here'); 
 
\t \t $("#logo").attr('class', 'col-xs-6'); 
 
\t \t $("#main-menu").attr('class', 'col-xs-6'); 
 

 
\t } 
 
\t else{ 
 
\t \t $("#logo").attr('class', 'col-sm-2'); 
 
\t \t $("#main-menu").attr('class', 'col-sm-10'); 
 
\t \t $("#main-menu").empty(); 
 
\t \t $("#main-menu:empty").append('reset my old html code'); 
 
\t } 
 
}

私はこのコードでこれらの関数を呼び出す：

$(document).ready(function(){   
    deleteMainMenu(); 
}); 

$(window).resize(function(){ 
    deleteMainMenu(); 
}); 

私はページのサイズを変更すると私のコードは正常に動作しますが、私は初期化するときページ幅を835px未満にしてから、ページをリロードしても何も起こりません！

私は自分の携帯電話でそれをテストしましたが、何も起こっていないようでしたが、スクロールすると突然機能が実行されます。

どうすればよいですか？ ありがとうございます！

Answer 1

まず、私はjavascriptがここに行く方法だとは思わない。 CSSには、これらの状況に対してかなり甘い選択肢があります。あなたのクラス（COL-XS-6）あなたは、ブートストラップを使用しているように見えるを見てみると、ブートストラップ

。 ブートストラップには、特にこの種のものにはかなり良い機能があります。 レスポンシブルユーティリティの場合はhereをご覧ください。

ブートストラップユーティリティを使用しない場合、あなたはこのような何かを行うことができないブートストラップ

：

2メニューの（.menu_bigと.menu_small）を作成し、表示/非表示メディアクエストを使用しています。

​​

Demo here