webサイト制作の勉強|2017月7月クラスブログ

webサイト制作の勉強に関する解説ブログです。

jQueryでリサイズ時に処理するイベント

レスポンシブサイトでは、読み込み時だけで無く、ブラウザーをリサイズした時にもイベントを指定する必要があります。
例えばPC時では通常のナビゲーションボタンでスマホ時にはハンバーガーメニューの時などです。

PC時ではナビゲーションボタンはもちろん表示されている状態ですが、スマホハンバーガーメニューではナビゲーションボタンが非表示に設定されています。
スマホ時のナビゲーションボタンを「slideToggle」などで表示・非表示をコントロールしている場合、1度出して、閉まったナビゲーションボタンには「display:none」がかかった状態になって閉まっています。
この状態で、ブラウザーをPCサイズにリサイズすると、ナビゲーションボタンに「display:none」がかかったままなので、ナビゲーションボタンが非表示の状態になっています。
なので、jQueryでリサイズ時にイベントを指定する必要があります。

resizeイベントの設定

ブラウザのウインドウをリサイズした時に引数のfunctionを実行します。また引数に何も設定しない場合は、要素に設定されたリサイズ時の処理を実行します。セレクタにはwindowsを指定しなければなりません。

読み込み時とリサイズ時を同時に処理する場合

$(window).on('load resize', function(){
// 処理を記載
});