読者です 読者をやめる 読者になる 読者になる

求職者支援訓練webサイト制作科1月クラス

フェリカテクニカルアカデミー池袋の求職者支援訓練webサイト制作科1月クラスの授業解説ブログです。

jQueryをスマホの時だけ動かす

今回作成したハンバーガーメニューをウィンドウをリサイズしても、ちゃんと動くようにしてみましょう。

.resize( )

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

$('#btn').on('click',function(){
if($(window).innerWidth() <= 767){
  $('#hum').not(':animated').toggleClass('click');
  $('nav ul').not(':animated').slideToggle(200);
  };
});

$(window).resize(function(){
  $('nav ul').hide();//スマホの時
if($(window).innerWidth() > 768){ 
 $('nav ul').show();//タブレット以上の時にulを表示させる
 $('#hum').removeClass('click');//PCから戻る時に邪魔な.clickを削除するため
 }