latup熊本でホームページ制作をしている人のメモ

簡単なjQueryのアコーディオンサンプル【補習2】

2009年 4月 30日 (木) / PM 11:19

昨日の補習１では最も簡単なアコーディオン処理を紹介しましたが、今回はもう少しだけ高度なjQueryのアコーディオン処理について少しだけ詳しい説明です。

今回は右のアコーディオンが一つだけ開くパターン（sample_2）について。
アコーディオンが開いているが最大１つとなり、不必要に縦長にならないのでスッキリしますので使うとすれば個人的にはこちらのパターンが多いです。

該当部分のソースを抜粋。

	// sample_2のアコーディオン処理
	$("#sample_2 .name").click(function(){
		// sample_2内のtext要素のうちクリックした次の要素を除いてスライドアップ
		$("#sample_2 .text").not($(this).next()).slideUp();
		// クリックした次の要素をスライド動作
		$(this).next().slideToggle();
	});

新しく追加された処理は　$(“#sample_2 .text”).not($(this).next()).slideUp();　の１行で、この中で　.not($(this).next())　がちょっとだけ高度な部分。

$(this)　がクリックされたタグを指し、　.next()　が『～の次の要素』を指します。
合わせると『クリックされたタグの次の要素』となり、それが　.not(　)　の中にあるので、『クリックされたタグの次の要素を除いて』となります。

何故こんな処理をするのかと言えば、　.not($(this).next())　が無い場合、全部のアコーディオンが一度全て閉じ、クリックしたアコーディオンが開きます。しかし、既に開いているアコーディオンをクリックした場合には『一度閉じてまた開く』という奇妙な動作になってしまうためにこのような例外処理を入れている訳です。

タグ: jQuery