jQueryを使ったアコーディオンメニュー

2007年1月18日

jQueryにはデフォルトでアニメーション機能を実現してくれる関数が用意されています。今回はそれらを使って、伸縮可能なメニュー(アコーディオン)を実装してみます。CSS3の否定擬似クラスを使って要素を指定しているのがポイントです。

まずはHTMLのソースをば

<dl>
<dt><a>jQuery公式サイト</a></dt>
<dd>
   <ul>
   <li><a>jQueryのチュートリアル</a></li>
   <li><a>jQuery 1.1の変更点など</a></li>
   <li><a>How jQuery Works</a></li>
   </ul>
</dd>
<dt><a>jQuery参考サイト(日本語)</a></dt>
<dd>
   <ul>
   <li><a>jQuery開発者向けメモ</a></li>
   <li><a>リファレンス</a></li>
   </ul>
</dd>
<dt><a>XPathについての参考サイト</a></dt>
<dd>
   <ul>
   <li><a>Xpathの書き方の基本</a></li>
   <li><a>XMLパス言語(XPath)</a></li>
   </ul>
</dd>
</dl>

今回は<dd>とか使ってますが、ブロック要素で内包できるタグなら他のものでもかまいません。<head>内にスクリプトを書いていきます。まずは、下記のように書きます。

$(document).ready(function(){
    //ここに実行したいコードを書きます
};

この$(document).readyはとても便利です。通常DOMを操作する際にはよく<body>内にonloadと書くかと思いますが、それを書く必要がないのです。しかも<body>に書くonloadはページが全てリロードされてからでないと機能しませんが、$(document).readyはページのリロードが終わらなくても機能することができます。

最初(デフォルトの状態)は一番始めのdd要素だけを表示して他を非表示にしたいので、下記のように書きます。

$(document).ready(function(){
    $("dd:not(:first)").hide();
};

$(”")の中に書かれているdd:not(:first)という部分ですが、これはCSS3で定義されている否定擬似クラスです。dd要素の最初(first)でない(not)部分、つまりはddの1番最初を抜かした2番目以降を指定しています。jQueryではCSS3の擬似要素などもサポートされています。上記のコードまでで、デフォルト状態で2番目、3番目のdd要素が隠れている状態になります。

アニメーションの設定をする

次ぎに、クリックした時に開閉するようにアニメーションを設定します。.click(function(){以下にクリックしたときの動作を設定します。スライドアップと、スライドダウンするには.slideUp(”")と.slideDown(”")を使います。括弧の中には速度を指定します。”slow”, “normal”, “fast”もしくはミリ秒で直接指定できます。最終的なコードは下記の通り。

$(document).ready(function(){
    $("dd:not(:first)").hide();
    $("dt a").click(function(){
        $("dd:visible").slideUp("500");
        $(this).parent().next().slideDown("300");
        return false;
    });
};

お好みに合わせてスライドの速度を調整してください。

アコーディオンメニューのデモはこちら

jQuery参考サイト

関連エントリー

Category
- Ajax
- jQuery
6 件のコメント
TrackBack URL

このエントリーのトラックバックURL: http://www.lllcolor.com/web/ajax/30.html/trackback

健忘録 - 2007.06.1 -PM 12:55

jQueryを使ってアコーディオンメニュー / CSS3実装…

http://www.lllcolor.com/web/ajax/30.html
http://www.lllcolor.com/web/jquery/55.html
CSS3先取りというのは凄い（今まで知らなかったのか）。アコーディオンメニューはそのCSS3の内包テキストマッチング属性…

松子 - 2007.07.13 -PM 3:03

はじめまして。いつも拝見・参考にさせてもらっています。
この場を借りてお礼申し上げます

アコーディオンメニュー、汎用性が高くてとっても気に入ってます！＾＾

もうひとつ機能を追加したくて自分なりに試行錯誤してみたのですが
どうもうまくいかなくて。。相談させてください。

現況のものは、クリックで今まで見えていたサブメニューが隠れて
クリック下のサブメニューが現れますよね。
その機能は残しつつ、開いているメニューを再度クリックしたら閉じるようにできないでしょうか？
（slideToggleの動きを追加）

もし良い方法がおわかりでしたら、教えてください！
宜しくお願いします。

A.Kawashima - 2007.07.14 -AM 3:09

＞松子さん

はじめまして。コメントありがとうございます♪
ご指摘の機能を付け足したアコーディオンメニューのサンプルを作ってみました。スクリプトは下記のようになります。

$(function(){
   $("dd:not(:first)").hide();
   $("dt a").click(function(){
   $(this).parent().next("dd")
   .slideToggle("300").siblings("dd:visible").slideUp("500");
   return false;
   })
});

ポイントはsiblings(”dd:visible”)という部分です。
最新版のjQuery1.1.3.1で動きます。参考にしてみてください。
また何かありましたら気軽に書き込んでくださいね

松子 - 2007.07.16 -PM 12:50