第2回 jQueryによるJavaScript入門はクリックの操作について説明したいと思います。
(ちなみに目次ページ作りました。)

第0回 でも解説したとおり、jQueryを利用すれば特定のHTML要素がクリックされた場合の命令を簡単に書くことができます。

まずはサンプルをご覧ください。（to-Rブログの箇所がクリック可能です。）

$(function(){
	$("dt").click(function(){
		$("dd").css("display","block");
	})
})

1行目と5行目の$(function(){　～})はお約束で、3行目の$(”dd”).css(”display”,”block”);は前回説明したCSSの操作になります。

クリックのを制御しているのは2行目と4行目になります。

$("dt").click(function(){
	クリックされた際の命令
})

$(”dt”)はCSSの操作と同じで、CSSセレクタでどの要素がクリックされた際に『クリックされた際の命令』を実行するかを指定しています。

$(”dt”)に続けて書かれている.click(function(){～})にクリックされた際の命令を指定します。

つまり、dt要素がクリックされた際にdd要素のdisplayプロパティをblockに変更するというJavaScriptが記述されています。

これだけですと開きっぱなしですので、閉じる為のクリックを付けておきましょう。

サンプル

$(function(){
	$("dt").click(function(){
		$("dd").css("display","block");
	})
	$(".close a").click(function(){
		$("dd").css("display","none");
		return false;
	})
})

5～8行目が新たに追加した、閉じる為のクリックの記述です。

CSSセレクタでcloseというクラス名が付けられている要素の中にあるa要素がクリックされた際の命令(イベント)を設定しています。

イベントは先ほどと逆でdd要素のdisplayプロパティをnoneに変更しています。

return false;に関してはa要素にclickイベントを設定する際に必要な記述になります。
return false;がないとclickイベントを実行した後にリンク先に移動してしまいます。
それを防ぐ為の記述です。

前回のCSSの操作と今回のclickの操作を利用すれば、かなり色々なことができると思いますので色々と試してみてください。

jQueryによるJavaScript入門　目次

【PR】書籍 現場のプロから学ぶXHTML+CSS 好評発売中