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

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

こうする

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

一応クリック時のclass振り分けもつけてる。

解説

html

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

css

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

js

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

前回との比較

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


コメントを残す

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