くろひょうのwebデザインのお勉強帳

フェリカテクニカルアカデミー web制作科の受講生です。授業の要点、復習でつまづいた点などを記録し、レベルアップに励みます。

クリエイターになるための、お勉強の記録帳

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

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

 

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

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

f:id:pleasure10501:20150420193115p:plain

HTML

<dl>
 <dt>見出し1</dt>
  <dd>テキストテキストテキスト</dd>
 <dt>見出し2</dt>
     <dd>テキストテキストテキスト</dd>
 <dt>見出し3</dt>
     <dd>テキストテキストテキスト</dd>
 <dt>見出し4</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独自(?)の要素の指定方法の1つで、「this要素の子要素である要素A」を指す。
  $( '+dd',this ) は「クリックしたdt要素の次に登場するdd要素」を指す。

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

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

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

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

 

 

広告を非表示にする