[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は別段凝ったことしないので割愛。


「[jQuery]スマホ対応アコーディオンの作り方」への1件のフィードバック

コメントを残す

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