jQueryでのtouchイベント - 未経験のwebサイト制作の勉強

スマートフォンでももちろんjQueryの click イベントは基本的に有効です。
しかし、スマートフォンやタブレットで click イベントを動かそうとすると、１テンポ遅れたもっさりとした動きになります。

そこで出てくるのが「touch」イベントです。
PCでは判りませんが、スマホで実際に触ってみると違いが明らかに解ります。
clickイベントの記述を「.on('click')」の形で記述していれば簡単に「touch」イベントを追加出来るので、レスポンシブサイトであれば「touch」イベントを積極的に使って行きましょう。
.click()の記述では汎用性が低く、使い勝手が悪いので.on('click')で記述する癖をつけましょう。

click イベントのみの場合

$(function() {
  $(".btn").on('click', function() {
     $("#menu").slideToggle(200);
    return false;
  });
});

タッチイベントの種類

touchstart : タッチしたときに発生する
touchmove : タッチしたまま動かしたときに発生する
touchend : タッチ状態から離れたときに発生する
touchcancel : タッチ中に電話がかかってきた場合などに発生する（通常は使わない）

clickイベントをtouchendイベントに変更

$(function() {
  $(".btn").on('touchend',function() {
     $("#menu").slideToggle(200);
    return false;
  });
});

PCで表示させる必要の無いもの（ハンバーガーメニュ）は「touchendイベント」のみを設定させましょう。
※「touchendイベント」のみの場合は、スマホ実機、もしくは検証モードでしか動きを確認出来ないので注意して下さい。

$(function() {
  $(".btn").on('touchend',function() {
     $("#menu").slideToggle(200);
    return false;
  });
});

作成

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>clickイベントとtouchイベントの違い</title>
<meta name="viewport" content="width=device-width">
<style>
.container {
width:200px;
margin:50px auto 0;
}
.box {
width:200px;
margin-bottom:20px;
}
p {
margin:0;
padding:0;
width:100px;
height:100px;
background:#009999;
}
#nav1,#nav2 {
width:200px;
height:400px;
background:#FF3366;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
$(function(){
//PCの時
$('#btn1').on('click',function(){
$('#nav1:not(:animated)').slideToggle();
});
//SPの時
$('#btn2').on('touchend',function(){
$('#nav2:not(:animated)').slideToggle();
});

});
</script>
</head>

<body>
<div class="container">
<div class="box">
<p id="btn1"></p>
<div id="nav1"></div>
</div>

<div class="box">
<p id="btn2"></p>
<div id="nav2"></div>
</div>
</div>
</body>
</html>