[jQuery]スマホ対応アコーディオンの作り方

色々見て回ってようやく分かってきた

言わずもがなjQueryは別途読ませること。
環境としてはとりあえず、1.7.1で動いた。

javascript

  • h2→アコーディオンのトリガーになるところ
  • ul→アコーディオンにしたいところ
  • open→アコーディオンが開いた時に付与するclass名

開閉時のアイコンは要らないよってんなら、4行目はなくてもいい。
ちなみに

ってやると、「h2の中にあるspanに.openをつける」ってことになる。

html

要はアコーディオンのトリガーと中身があればいいので、h2とかulにしなくても大丈夫。
実際に使うときはclassとかidを振っとかないと他と喧嘩するだろうから注意。

css

h2は開閉でビジュアル差別化したい時の例。
アコーディオンの初期値を非表示にしたいときはdisplay:none;を入れておく。

【応用】多階層にする

クラスなりで割り振れば多階層を作ることができる。

javascript

html

cssは別段凝ったことしないので割愛。

シェアする

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

フォローする

コメント

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