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

Posted on 2013年6月25日(火) 23:50

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

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

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

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

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

toggle2

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

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

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

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

例えば…

$("button").click(function(){
	$("div").toggle();
});

$("button").click(function(){

$("div").toggle();

});

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

このサイトのカレンダー部分は．．．
＜ＨＴＭＬ＞

    <div class=".toggle">
    <h2>カレンダー</h2>
      <div class="side-cont">
        <?php get_calendar(); ?>
      </div>
    </div>

<h2>カレンダー</h2>

<?php get_calendar(); ?>

</div>

の記述と、あとヘッダー部分に
＜ｊｓ＞

<script>$(function(){
	$(".toggle").find("h2").on("click", function () {
		$(this).next("div").toggle(); 
　　　　});
});</script>

$(".toggle").find("h2").on("click", function () {

$(this).next("div").toggle();

　　　　});

});</script>

が記述されています。

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

1	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

です。

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

<script>$(function(){
	$("h2").toggle(function(){
		$(this).next("div").show();
	},
	function(){
		$(this).next("div").hide();
	});
});</script>

$("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を１つ追加すれば動きます。
つまり、jQueryのファイル

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

1	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

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

<script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>

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の廃止と解決法 …

です。

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

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

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

feedlyで購読の登録する。

RSSリーダーに登録する。

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

Follow @kappafoo

日	月	火	水	木	金	土
« 5月				7月 »
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30

かっぱふぅ雑記帳

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

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

関連記事も見てください

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

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

コメントをどうぞ