前の記事に比べてスマートなのができた
これは嬉しい
こうする
装飾については割愛
jQueryはこれで動いてるけど他のバージョンでも多分ける(未確認)。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<nav>
<ul>
<li><a>めにゅー</a></li>
<li><a>めにゅー</a></li>
<li><span>めにゅー</span>
<ul>
<li><a>子めにゅー</a></li>
<li><a>子めにゅー</a></li>
<li><span>子めにゅー</span>
<ul>
<li><a>孫メニュー</a></li>
<li><a>孫メニュー</a></li>
<li><a>孫メニュー</a></li>
</ul>
</li>
</ul>
</li>
<li><span>めにゅー</span>
<ul>
<li><a>子めにゅー</a></li>
<li><span>子めにゅー</span>
<ul>
<li><a>孫メニュー</a></li>
<li><a>孫メニュー</a></li>
<li><a>孫メニュー</a></li>
</ul>
</li>
<li><span>子めにゅー</span>
<ul>
<li><a>孫メニュー</a></li>
<li><a>孫メニュー</a></li>
<li><a>孫メニュー</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
nav ul ul{ display:none;}
$(function(){
$('nav span').on('click', function(){
$(this).siblings('ul').slideToggle();
$(this).toggleClass('active');
});
});
一応クリック時のclass振り分けもつけてる。
解説
html
低階層表示非表示部分はspanでやってる。
都合により別のにしてもいいけどaだけは無い。
上記サンプルは孫までだけどもっと先まで行ける。
css
格納するためにcssで低階層のulを非表示。
js
「クリックしたspanと同梱・同階層のulを表示・非表示する」っていう仕組み。
トリガーとして低階層開いてるかどうかの区別がないと辛いので、classを振るようにしてる。
前回との比較
階層別トリガーにそれぞれjsを書いてたけど統一できた。
jsについて素人だからね、見返すと成長が分かって嬉しいね。
コメント
[…] いつだったかに書いた記事から更にグレードアップした感じ。 ネックは、トリガーがaタグでいけるところ。 […]