[jQuery]スマホ対応多階層対応アコーディオンメニュー

Reading Time: < 1 minute

前の記事に比べてスマートなのができた
これは嬉しい

こうする

装飾については割愛
jQueryはこれで動いてるけど他のバージョンでも多分ける(未確認)。
[html]

[/html]
[css]
nav ul ul{ display:none;}
[/css]
[js]
$(function(){
$(‘nav span’).on(‘click’, function(){
$(this).siblings(‘ul’).slideToggle();
$(this).toggleClass(‘active’);
});
});
[/js]
一応クリック時のclass振り分けもつけてる。

解説

html

低階層表示非表示部分はspanでやってる。
都合により別のにしてもいいけどaだけは無い。
上記サンプルは孫までだけどもっと先まで行ける。

css

格納するためにcssで低階層のulを非表示。

js

「クリックしたspanと同梱・同階層のulを表示・非表示する」っていう仕組み。
トリガーとして低階層開いてるかどうかの区別がないと辛いので、classを振るようにしてる。

前回との比較

階層別トリガーにそれぞれjsを書いてたけど統一できた。
jsについて素人だからね、見返すと成長が分かって嬉しいね。

シェアする

  • このエントリーをはてなブックマークに追加

コメント

  1. […] いつだったかに書いた記事から更にグレードアップした感じ。 ネックは、トリガーがaタグでいけるところ。 […]