どもです。
HTML＆CSSコーダーから離れて久しい僕ですが、久しぶりにまともにスマホ用ページを作ることに。
というわけでタッチで開閉するメニューを…
と思ったのですが、スマホ用ブラウザやアプリが使い勝手良く進化しているので、4年前の記事では不足。
具体的には「タッチで開閉するメニュー」に加え、「メニュー以外をクリックしたら閉じる」ようにしてやらないと、今どきは不親切です。
$(ボタン).click(function(){
$(ナビゲーション).toggle(100);
return false;
});
$(document).click(function(event){
if(!$(event.target).closest(ナビゲーション).length){
$(ナビゲーション).hide(100);
}
});
jQueryのイベントは、イベントが発生した要素から外側の要素に向かって、順番にイベントがバブリング（伝播）します。
したがってボタンを押したとき、記述の順番に関係なくボタンのイベントが先に発生し、return falseでイベントを終了させてしまうことで後続のイベントの着火を無かったことにできます。
はい、ここで賢明な方なら「$(document).clickの方で分岐するだけで良くない？」と思われるかと思います。
仰る通りです。
HTMLが理想的に書かれているなら、こんな回りくどい真似は要りません。
他人の作ったソースを触らないで良い。return false割り込みの利点はコレです。
こういったやり方が活きるのは、複数階層のメニューのくせにHTMLが理想的でなく、開閉のイベントがもっとややこしくなる場合です。
具体的にはHTMLに造詣が深くない人が作ったPC用サイトを無理やりスマホ用に改造するときとかね！！！！
参考サイト：
[CodeGrid]実践、jQuery 第1回 .on()と.off()を使いこなす 1
[Qitta]# jQueryで特定要素以外クリック時のイベントを取得する