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

WEBサイト制作の勉強|フェリカテクニカルアカデミー

WEBサイト制作の勉強の為の解説ブログ。東京池袋のフェリカテクニカルアカデミーでは求職者支援訓練の一環として、WEBサイト制作を学ぶことができます。

モバイルファーストを意識したレスポンシブデザインサイトの制作 4

jQuery レスポンシブデザイン

ここまでで、PC時のレイアウトも含めほぼ完成ですが、今のままだとPC時にもjQueryアコーディオンパネルが動いてしまうので、if文でウィンドウサイズがスマホサイズの時のみに動くように条件分岐をしてみましょう。
また、スマホの機種によっては、「touchstart」の動きが安定しない為、タップした際にアコーディオンパネルが開いて閉じる、という挙動になってしまうので、アコーディオンパネルのようにslideToggleを使う場合はアニメーションが実行中はアニメーションの処理を受け付けないようにしましょう。

元のアコーディオンパネルの記述

 // アコーディオン
$('.toggle').find('h2').on('click touchstart',function(){
 $(this).siblings('dl').slideToggle(300, function(){
   $(this).parent().toggleClass('close');
   });
  });

スマホサイズの時のみに動くようにif文と.not(':animated')を追加

 // アコーディオン
 $('.toggle').find('h2').on('click touchstart',function(){
        if( $('body').width() <= 640){ //ブレイクポイント未満でアコーディオンが動くようにする条件分岐
      $(this).siblings('dl ').not(':animated').slideToggle('fast', function(){
        $(this).parent().toggleClass('close');
      });
     }
  });