【jQuery】toggle関数を使ってアコーディオンメニューを設置する。(1.9以降対応版)
ちわーす。
遊び心を、かっぱふぅ( @kappafoo )です。
今回はjQueryのtoggleメソッドを使ってアコーディオンメニューを設置する方法を記事にします。
cc licensed ( BY SA ) flickr photo shared by Remy Sharp
まず、アコーディオンメニューとは、見出しなどをクリックすると内容やリストなどが、アコーディオンのようにスラスラと出てくるメニューです。
また、再度クリックすると逆に隠れていくこともできます。
試しにこのサイトのサイドメニューの見出し部分をクリックしてみてください。
上の画像の「カレンダー」や「カテゴリー」の部分ですね。
どうです、クリックすると内容が隠れてましたか?...また、クリックすると出てきましたか?
この機能を実装するには、jQueryのtoggleメソッドを使います。
このtoggleメソッドは、 $("要素").toggle();のように使用して、jQueryオブジェクトで指定した要素が表示されている時は隠し、隠れている時は表示するものです。
例えば…
1 2 3 |
$("button").click(function(){ $("div").toggle(); }); |
と記載すれば、
buttonをクリックする度にdivで囲まれたモノを消したり表示したりすることができます。
このサイトのカレンダー部分は...
<HTML>
1 2 3 4 5 6 |
<div class=".toggle"> <h2>カレンダー</h2> <div class="side-cont"> <?php get_calendar(); ?> </div> </div> |
の記述と、あとヘッダー部分に
<js>
1 2 3 4 5 |
<script>$(function(){ $(".toggle").find("h2").on("click", function () { $(this).next("div").toggle(); }); });</script> |
が記述されています。
...あ、そうそうヘッダー部分でjQueryのファイルを読み込むのを忘れないように...
1 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> |
です。
jQuery1.8までは、toggleはクリック関数として、
1 2 3 4 5 6 7 8 |
<script>$(function(){ $("h2").toggle(function(){ $(this).next("div").show(); }, function(){ $(this).next("div").hide(); }); });</script> |
と書くことができました。
ネットで検索すると、このような記述の仕方がまだ出てきます。
しかし、最近のjQueryのバージョンである1.9以降では、この書き方ではまったく動きません。
これはtoggleクリック関数がjQuery 1.9で廃止されたことによります。
今後は、前述のtoggleメソッドで記述しておきましょう。
ちなみに、これまでのtoggleクリック関数をそのまま使う場合には、jQuery Migrate というjsを1つ追加すれば動きます。
つまり、jQueryのファイル
1 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> |
と、もうひとつjQuery Migrateのファイル
1 |
<script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script> |
を読みこませるということです...これで、従来の方法でも動きますよ。
ということで、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の廃止と解決法 …
です。
みなさんもアコーディオンメニューいかがですか。