jQuery で作る簡単でシンプルなアコーディオンメニュー

calendar

reload

jQuery で作る簡単でシンプルなアコーディオンメニュー

jQuery でアコーディオンメニューを作ってみました。
某参考書を元に作ったのですが、人によって書き方は色々あるというのを教えてもらった感じです。
できるだけ簡単でシンプルな書き方にしてみたつもりなので、参考にして頂けると幸いです。

1、jQuery を読込む

まずはこれをしないとはじまりません。

2、HTMLを書く

とりあえずこんな感じで。

3、CSSを書く

お好みで背景色・文字色等、調整してください。

4、Javascriptを書く

ほんの数行です。

出来上がりです。

ポイント

の部分。
$(‘+ul.subMenu’,this)でクリックした要素の兄弟要素そ指定する事ができるようです。
この書き方を知っておくだけで色んな事が、簡単にかけるようになると思います。

5-1、デモ1

こんな感じになります。

5-2、デモ2

javascriptを下記にようにするともう少し凝った物ができます。

以上です。

javascript自体はシンプルなので、汎用性が聞くと思います。
是非参考にしてみてください。