［jQuery］縦ナビゲーションでアコーディオンメニュー の解説

「jQueryで縦ナビゲーションでアコーディオンメニュー」の記事の補足です。

テキストにある基本形は、見出し１つに対してサブメニュー１つ、のシンプルなものでした。

jQueryのスクリプトがやや複雑なので、解説します

HTML

<dl>
　<dt>見出し１</dt>
　　<dd>テキストテキストテキスト</dd>
　<dt>見出し２</dt>
    　<dd>テキストテキストテキスト</dd>
　<dt>見出し３</dt>
    　<dd>テキストテキストテキスト</dd>
　<dt>見出し４</dt>
    　<dd>テキストテキストテキスト</dd>
</dl>

 jQuery

$( function(){
　$('dd:not(:firsrt)').css('display','none');　・・①
　$('dl dt').click(function(){
　　if ($('+dd',this).css('display')=='none'){　・・②
　　　$('dd:visible').slideUp('slow');　　　　・・③
　　　$('+dd',this).slideDown('slow');　　　・・④
　　}
　});
});

①　$('dd:not(:first)') ＝「dd要素で最初に登場するもの以外」。　
　※$('dd:first')ならば最初に登場するdd要素、という意味になる

最初に登場するdd要素以外の全てのdd要素を、display:noneにする、という命令

②　+ddは隣接セレクター。　
　　thisが指すのは「クリックしたdt要素」のこと。

　　$( '要素A', this )はthis独自（？）の要素の指定方法の１つで、「this要素の子要素である要素A」を指す。
　　$( '+dd',this ) は「クリックしたdt要素の次に登場するdd要素」を指す。

if ($('+dd',this).css('display')=='none') {  }　は、「クリックしたdt要素の次のdd要素が非表示ならば、（以下の処理を行う）」という意味になる。

表示されている場合の処理命令はないので、何も起きない。

③　$( 'dd:visible' ) は表示状態にあるdd要素のこと。これをスライドアップして非表示にする、という命令

④　$( '+dd',this )は②で述べた通り。このdd要素をスライドダウンして表示させよ、という命令