[jQuery]タップで開閉するメニューをif文で作る。

カテゴリー:
jQuery

マウスをhoverさせて表示/非表示を切り替えるメニュー(ドロップダウンメニューなど)はよくありますが、iPadなどタッチデバイスではhoverは動作しません。

なので、タッチデバイス向けにタップすると表示され、もう一度タップすると非表示になるメニューを作成してみました。

あまり洗練された動きではないですが、jQueryの勉強として公開してみます。

サンプルコード

demo

コードをおさらい

jQeryの部分を抽出してひとつひとつ見ていきます。

clickイベントをon()を使って設定する。

サンプルコードでは、li要素をメニュー項目として、ul要素のdisplayのblock/noneを切り替えるという動作をさせます。

とすることで、.menuに対してclickイベントを設定。
クリックした.menu直下のul要素だけを対象にするためにthisを使って以下のように

値を取得し、変数に入れて次の処理で使います。

ここまでの2行で開閉させたいul要素を絞り込むところまで出来ました。
次の工程では実際に開閉させるための処理を作っていきます。

if分岐でdisplayをコントロールする

ul要素のdisplayが「noneであればblock」にして表示、「blockならnone」にして非表示といったif分岐を作ります。

== は「左右の値が同じ」ならtrueを返す演算子です。
「content(クリックした.menuの子要素のul要素)」のdisplayの値が「none」と同じかどうか比較しています。
同じ場合、つまりdislay:noneならば次の処理に進みます。

display:noneをblockに変えてul要素を表示します。
noneと同じではなかった場合(ul要素のdisplayがblockだった場合)、falseが返されてこの処理はスキップ。次の処理に進みます。

displayをblockに変えます。開閉することが目的なので、メニューが閉じている状態でも開いている状態でも対応できています。
以上のスクリプトをタッチデバイスの時のみ読み込むようにするといいと思います。
WordPressであれば、is_mobile()とかですね。

以上で完了です。
間違いがあれば指摘いただけると幸いです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です