jqueryでアコーディオンメニューを作る

今回はjqueryを使って表示領域を有効に使える、アコーディオンメニューを作ります。

html

<dl>
<dt>アコーディオン1</dt>
<dd>こんにちは、ぼくはアコーディオン1号です。</dd>
<dt>アコーディオン2</dt>
<dd>こんにちは、ぼくはアコーディオン2号です。</dd>
<dt>アコーディオン3</dt>
<dd>こんにちは、ぼくはアコーディオン3号です。</dd>
</dl>

jquery

$(function () {
  $("dd:not(:first)").css("display","none");
  $("dt:first").addClass("select");
  $("dl dt").click(function(){
    var cont = $(this).next();
    if($(cont).css("display")=="none"){
    $("dd").slideUp("slow");
    $(cont).slideDown("fast");
    $("dt").removeClass("select");
    $(this).addClass("select");
    }
  }).hover(
    function(){$(this).addClass("over");}
    ),(
    function(){$(this).removeClass("over");
  });
});

css

dt,dd{margin:0; padding:0;}
dt{background-color:#9ACD32; color:#FFF; width:496px; padding:2px;}
dd{ background-color:#FFC; padding:5px; width:490px;}
.over{cursor:pointer;}
.select{cursor:default; background-color:#6B8E23;}

解説

$("dd:not(:first)").css("display","none");

初めのdd要素以外のdd(アコーディオン2と3)を非表示にしています。
:not(セレクタ)→選んだもの以外
:firest→はじめの要素
dd:not(:first)→ddではじめの要素以外
.css(“display”,”none”);→CSSの設定で非表示にする

 $("dl dt").click(function(){

dlの子要素dtをクリックした時

var cont = $(this).next();

クリックしたdtの次の要素であるddを変数contに定義しています。
$(this).next()→セレクターで選んだ次の兄弟要素を選びます。
※何度もセレクターするものは、変数に入れておくと、jqueryが早くなります。

if($(cont).css("display")=="none"){

定義したddが表示されていなかった場合実行

 $("dd").slideUp("slow");
    $(cont).slideDown("slow");

dd要素全てをスライドで上にあげ、定義したdd要素を下にスライドさせます。
.slideUP .slideDownは
スピードはslow,normal,fastまたは?ミリ秒『slideUp(?)』で指定できます。

$("dt").removeClass("select");
    $(this).addClass("select");

タイトルに触れたときのマウス表示をクリックできない表示に変更しています。
removeClass()→cssを消す
addClass()→cssを加える

.hover(
    function(){$(this).addClass("over");}
    ),(
    function(){$(this).removeClass("over");

タイトルに触れたときのマウス表示をクリックできる表示に変更しています。
.hover(マウスがのった時,マウスが離れた時)