こんばんわ。to-Rの西畑です。
jQueryによるJavaScript入門、第5回はクリックイベントを交互にハンドリングするtoggleの操作方法をご紹介します。
クリックの操作で解説した方法ですとクリックされた際に一つのイベントを実行することができますが、サンプルのような場合、最初のクリックでパネルを開き、もう一度クリックされたらパネルを閉じるのような開閉パネルにしたくないでしょうか？
そのような際に利用するのがtoggleというjQeryの関数になります。
まずはサンプルをご覧ください。
ソースコードを解説します。
$(function(){ $("dt").toggle(function(){ $("dd").css("display","block"); }, function(){ $("dd").css("display","none"); }) }) |
クリックの場合click()の括弧に包まれたfunction(){ }は一つでしたがtoggleの場合はカンマ(,)続きで複数設定できます。
1回目のクリックで最初のfunction(){}の中の命令を実行し、2回目のクリックで次のfunction(){}、3回目のクリックではまた最初のfunction(){}の中の命令を実行と言った具居合いに、クリックされる度に順番に命令を実行していきます。
サンプルですと、最初のクリックでパネル部分であるdd要素のdisplayプロパティをblockに変更し、次のクリックでdisplayプロパティをnoneに変更しています。以降のクリックではこれが繰り返されます。
これで少しは使いやすい開閉パネル変わりましたね。次回はもう少しjQueryっぽい開閉パネルに改造してみたいと思います。