さて、前回jQueryとは何かという話しをしましたが、本日は実際にjQueryを使ってみます。何事も実践しないと身につかないですからね。

まず、旧来の方法でアコーディオンっぽいメニューを作ってみました。
サンプル

サンプルでは、3つページを別々に制作し、リンクでページを遷移してメニューを開閉させています。
これでは、ページを遷移する際に読み込む時間がかかりますし、遷移後にページの先頭に画面が移動するなどの問題もあります。そして何より、制作する立場になった時、ページ量がかなり増えてちょっと何かを書き換えるのにも処理が煩雑になってしまいます。

次にjQueryを使用したアコーディオンメニューを作ってみました。
サンプル

今度は、何かなめらかな動きになりましたよね。
こんなflashライクな動きが簡単につけられるのです。いやぁ、もう少し早く勉強すれば良かった(^^ゞ

 


それでは、まずはコードを公開してみます。我流で作ってるので、どうなのだろう・・・。

まずは、jQueryを入手します。入手は本家サイトのダウンロードページからどうぞ！

↓HTMLソース（sample.html）↓

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQueryアコーディオンメニュー</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/accordion.js"></script>
</head>
<body>
<div id="navi">
<h1>ヘッダー1</h1>
<ul>
<li>1-1</li>
<li>1-2</li>
<li>1-3</li>
</ul>
<h1>ヘッダー2</h1>
<ul>
<li>2-1</li>
<li>2-2</li>
<li>2-3</li>
<li>2-4</li>
<li>2-5</li>
</ul>
<h1>ヘッダー3</h1>
<ul>
<li>3-1</li>
<li>3-2</li>
<li>3-3</li>
<li>3-4</li>
</ul>
</div>
</body>
</html>

↓ついでに、CSS（main.css）↓

@charset "utf-8";
/* CSS Document */
#navi{
width: 400px;
border: 1pt solid #000;
}

#navi h1{
font-size: 14px;
line-height: 2.0em;
background-color: #666;
color: #FFF;
text-align: center;
padding: 0;
margin: 0;
}

.sub{
list-style-type: none;
background-color: #FF9;
padding: 0 0 0 5px;
margin: 0;
}

↓JavaScriptソース（accordion.js）↓

$(document).ready(function(){
$('#navi > h1:not(:first)').next().slideUp('fast');
  $('#navi > h1').click(function(){
    // 引数には開閉する速度を指定します
    $(this).next().slideToggle('slow');
  });
});

これだけのことで、アコーディオンメニューを実現しています。
HTMLとCSSについては、ふれないことにして、JavaScriptを自分なりに解説してみます。HTMLとCSSが分からない方はgoogle等で調べて下さい(^^ゞ

一行目はサンプルページ（$(document)）を読み込んだ時（.redy(）に、以下の処理をする（function(){）ってことです。
二行目は「navi」をidにもつ要素の（$(‘#navi）子要素（>）のh1で最初以外のもの（:no(:first)’)）の次に来る要素（.next）を閉じる（.SlideUp(‘fast’)）ってことです。つまり一番目以外のメニューのアコーディオンを最初に閉じなさいという処理ですね。
三行目は 「navi」をidにもつ要素の（$(‘#navi）子要素（>）のh1をクリックした時（.click）に、次の処理をする（function(){）ってことです。
四行目はコメントなので飛ばして、五行目ですが、$(this)はこの場合は$(‘#navi > h1′)の事ですので、「navi」をIDにもつ要素の子要素のh1の次に来る要素（.next）を開いたり閉じたりする（.slideToggle(‘slow’);）処理です。

以上がJavaScriptの簡単な解説です。（間違ってたら誰か訂正して下さい(^^ゞ）
いやぁ、こりゃ楽しいですね！いろいろできそう！
今回は、練習のためにシンプルに使ってみましたが、jQueryにはたくさんのプラグインを開発している方がいて、公開されています。そちらもそのうち使ってみようと思います(^-^)

【jQuery日本語リファレンス】
http://semooh.jp/jquery/

【本家サイト：プラグインページ】
http://plugins.jquery.com/