マウスをhoverさせて表示/非表示を切り替えるメニュー(ドロップダウンメニューなど)はよくありますが、iPadなどタッチデバイスではhoverは動作しません。
なので、タッチデバイス向けにタップすると表示され、もう一度タップすると非表示になるメニューを作成してみました。
あまり洗練された動きではないですが、jQueryの勉強として公開してみます。
サンプルコード
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<title>example</title>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<style type="text/css">
.menu{
float: left;
margin-left: 30px;
}
li{
list-style: none;
}
button{
padding: 5px 30px;
}
ul{
padding: 0;
display: none;
}
</style>
<script type="text/javascript">
jQuery(function() {
jQuery('.menu').on('click', function(){
var content = jQuery('ul',this);
if(jQuery(content).css('display')=='none'){ //contentのdisplayがnoneの場合
jQuery(content).css('display','block');
}else{//contentのdisplayがnoneではない場合
jQuery(content).css('display','none');
}
});
});
</script>
</head>
<body>
<div>
<div class="menu">
<button type="button">ボタン1</button>
<ul>
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
<li>メニュー4</li>
<li>メニュー5</li>
</ul>
</div>
<div class="menu">
<button type="button">ボタン2</button>
<ul>
<li>メニュー6</li>
<li>メニュー7</li>
<li>メニュー8</li>
<li>メニュー9</li>
<li>メニュー10</li>
</ul>
</div>
<div class="menu">
<button type="button">ボタン3</button>
<ul>
<li>メニュー11</li>
<li>メニュー12</li>
<li>メニュー13</li>
<li>メニュー14</li>
<li>メニュー15</li>
</ul>
</div>
</ul>
</body>
</html>
コードをおさらい
jQeryの部分を抽出してひとつひとつ見ていきます。
clickイベントをon()を使って設定する。
サンプルコードでは、li要素をメニュー項目として、ul要素のdisplayのblock/noneを切り替えるという動作をさせます。
jQuery('.menu').on('click', function(){
とすることで、.menuに対してclickイベントを設定。
クリックした.menu直下のul要素だけを対象にするためにthisを使って以下のように
var content = jQuery('ul',this);
値を取得し、変数に入れて次の処理で使います。
ここまでの2行で開閉させたいul要素を絞り込むところまで出来ました。
次の工程では実際に開閉させるための処理を作っていきます。
if分岐でdisplayをコントロールする
ul要素のdisplayが「noneであればblock」にして表示、「blockならnone」にして非表示といったif分岐を作ります。
if(jQuery(content).css('display')=='none'){
//〜
== は「左右の値が同じ」ならtrueを返す演算子です。
「content(クリックした.menuの子要素のul要素)」のdisplayの値が「none」と同じかどうか比較しています。
同じ場合、つまりdislay:noneならば次の処理に進みます。
jQuery(content).css('display','block');
display:noneをblockに変えてul要素を表示します。
noneと同じではなかった場合(ul要素のdisplayがblockだった場合)、falseが返されてこの処理はスキップ。次の処理に進みます。
}else{
jQuery(content).css('display','none');
}
displayをblockに変えます。開閉することが目的なので、メニューが閉じている状態でも開いている状態でも対応できています。
以上のスクリプトをタッチデバイスの時のみ読み込むようにするといいと思います。
WordPressであれば、is_mobile()とかですね。
以上で完了です。
間違いがあれば指摘いただけると幸いです。