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

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

1、jQuery を読込む

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

2、HTMLを書く

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

3、CSSを書く

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

4、Javascriptを書く

ほんの数行です。

出来上がりです。

ポイント

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

5-1、デモ1

こんな感じになります。

5-2、デモ2

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


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

Filed under: jQuery, マークアップTagged with: ,

No comment yet, add your voice below!


Add a Comment

メールアドレスが公開されることはありません。

Comment *

Name *
Email
Website