【jQuery】toggle関数を使ってアコーディオンメニューを設置する。(1.9以降対応版)

ちわーす。
遊び心を、かっぱふぅ@kappafoo )です。

今回はjQueryのtoggleメソッドを使ってアコーディオンメニューを設置する方法を記事にします。


cc licensed ( BY SA ) flickr photo shared by Remy Sharp

まず、アコーディオンメニューとは、見出しなどをクリックすると内容やリストなどが、アコーディオンのようにスラスラと出てくるメニューです。
また、再度クリックすると逆に隠れていくこともできます。

試しにこのサイトのサイドメニューの見出し部分をクリックしてみてください。

toggle2

上の画像の「カレンダー」や「カテゴリー」の部分ですね。

どうです、クリックすると内容が隠れてましたか?...また、クリックすると出てきましたか?

この機能を実装するには、jQueryのtoggleメソッドを使います。

このtoggleメソッドは、 $("要素").toggle();のように使用して、jQueryオブジェクトで指定した要素が表示されている時は隠し、隠れている時は表示するものです。

例えば…

と記載すれば、
buttonをクリックする度にdivで囲まれたモノを消したり表示したりすることができます。

このサイトのカレンダー部分は...
<HTML>

の記述と、あとヘッダー部分に
<js>

が記述されています。

...あ、そうそうヘッダー部分でjQueryのファイルを読み込むのを忘れないように...

です。

jQuery1.8までは、toggleはクリック関数として、

と書くことができました。

ネットで検索すると、このような記述の仕方がまだ出てきます。

しかし、最近のjQueryのバージョンである1.9以降では、この書き方ではまったく動きません。

これはtoggleクリック関数がjQuery 1.9で廃止されたことによります。

今後は、前述のtoggleメソッドで記述しておきましょう。

ちなみに、これまでのtoggleクリック関数をそのまま使う場合には、jQuery Migrate というjsを1つ追加すれば動きます。
つまり、jQueryのファイル

と、もうひとつjQuery Migrateのファイル

を読みこませるということです...これで、従来の方法でも動きますよ。

ということで、jQueryを使ったアコーディオンメニューについてでした。

参考にさせていただいたサイトは...
株式会社LIGさん「超簡単jQuery!”toggle系メソッド”を使ってアコーディオンメニューやタブをさくっと実装する方法」

超簡単jQuery!”toggle系メソッド”を使ってアコーディオンメニューやタブをさくっと実装する方法 | 株式会社LIG
超簡単jQuery!”toggle系メソッド”を使ってアコーディオンメニューやタブをさくっと実装する方法 …

ポップスウエブ工房さん「jQuery toggleクリック関数を使用しないアコーディオン」

POPS-WEB|POPS WEB
jQuery toggleクリック関数を使用しないアコーディオン …

株式会社K2さんの「jQuery toggleの廃止と解決法」

jQuery toggleの廃止と解決法 | K2
jQuery toggleの廃止と解決法 …

です。

みなさんもアコーディオンメニューいかがですか。

この記事が参考になったら、シェアしてください

 

 

関連記事も見てください

jQuery【jQuery】WordPressでjQuery本体を2度読み込まないためにするべきこと。 (2013.06.30)
ディナー2ホルトホール大分のレストラン「ホルトガーデン」でディナーを食べました。美味しかったですよ。 (2013.08.13)
ホルトガーデン1ホルトホール大分のカフェレストラン「ホルトガーデン」で食事をしてきましたので紹介します。 (2013.07.23)
更新10【ノート】DOPナビの「MC312D-W」の2月版スポット更新を行ないました。家の前の道は... (2013.03.07)
ナビ23【ノート】ディーラーオプションナビ「MC312D-W」の地図更新を行ないました。 (2013.02.16)

RSSの登録で最新記事をお届けします

フォローしてもらえると嬉しいです

F

コメントをどうぞ

メールアドレス (必須・公開されません)
コメント本文

  • スパム・迷惑コメント投稿防止のため、メールアドレスの入力が必須ですが、公開はされません。何卒ご協力のほどお願いいたします。
  • 投稿いただいたコメントは管理者のチェック後掲載しておりますので、即時には反映されません。

▲Pagetop