window.resizeはサイズ変更されたウィンドウを再読み込みしていません

Question

これは私のウィンドウが767未満にリサイズされるとhrefリンクをロードするjqueryの私の作品です。これはうまくいきます。ブラウザのリロードボタンをクリックすると、767未満のウィンドウ幅にならないようにウェブページが戻されます。

サイズ変更されたWebページが最新表示されません。

$(window).bind('resize', function(e){ 

    width = $(window).width(); 

    if (width < 767){ 
     $("a.collapseListBt").show(); 
     // do something here 
     if ($('.content-box-right').hasClass('show')){ 
      $('.content-box-right').removeClass('show'); 
     } 
    } else{ 
     $("a.collapseListBt").hide(); 
     $('.content-box-right').addClass('show'); 
    } 

}); 

$(document).load(function(e){ 

    width = $(window).width(); 

    if (width < 767){ 
     $("a.collapseListBt").show(); 
     // do something here 
     if ($('.content-box-right').hasClass('show')){ 
      $('.content-box-right').removeClass('show'); 
     } 
    } else{ 
     $("a.collapseListBt").hide(); 
     $('.content-box-right').addClass('show'); 
    } 

}); 

あなたの問題は、あなたの関数が唯一であることを、あなたはJavaScriptにこれを追加767

Answer 1

の窓幅のための固定設定を移動させ、まだそれを維持する方法を提案していないしてくださいwindow.resizeで呼び出されます。したがって、ページを読み込むときに、あなたが望む仕事をすることは何もありません。あなたは本当にそれ以上のCSSとメディアクエリを使用することができますが、私の意見ではそれははるかに良いでしょう。

Answer 2

あなたはこのように2つのイベントをバインドすることができます：屋私は私ができる知っているが、それはjQueryを使って行うことができない

$(window).on('resize load', function(e){ 

    width = $(window).width(); 

    if (width < 767){ 
     $("a.collapseListBt").show(); 
     // do something here 
     if ($('.content-box-right').hasClass('show')){ 
      $('.content-box-right').removeClass('show'); 
     } 
    } else{ 
     $("a.collapseListBt").hide(); 
     $('.content-box-right').addClass('show'); 
    } 

});