jQuery 復習 定義型リスト で アコーディオンメニュー

定義型リスト をセンタリングする。

• dl にはwidth を指定する
• dt には cursor: pointer; でクリックできるように見せる。
• リストをbody のセンターに配置しようと思うならば、↓ではダメですね。
• dt, dd の親は dl だから、親に対するセンターになってしまいます。

dl{
width: 300px;
}
dt,dd{
margin: 0 auto;
}

• dl がbody に対してセンターになるようにしたいのだから…

dl{
width: 300px;
margin: 0 auto;
}
dt,dd{
}

:not, :first セレクタ

• $('.accordion>dd').hide();
  $('.accordion>dd:first').show(); は格好良くないし、段取りが２つだから良くない。
• ここは、やはり、$('.accordion>dd:not(:first)').hide();、とするべきだろう。
• 「first:」はセレクターの中から、最初の要素を指定できる、jQueryの独自セレクタ。jQueryでしか使えないのかな？
• 「A:not( )」は( )ではないAを指定する、CSS3のセレクタで、否定擬似クラスという。

.next メソッド

• dt をクリックしたら、隣の dd に対して slideDown する。
• $('.accordion>dt').on('click',function(){
  $(this).next('dd').slideDown();
  });

• .nex() ()の中はセレクタ。セレクタに合致したものが存在する時だけ.nextが機能するようになる。

<script>
$(function(){
$('li.third-item').next().css('background','red');
});
</script>

<ul>
<li>list item 1</li>
<li>list item 2</li>
<li class="third-item">list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>

• $('li.third-item').next('dt').css('background','red'); これだと…

• 機能しません。

('display')=='none'

• 戻り値は、文字列。

完成！

<script>
$(function(){
$('.accordion>dd:not(:first)').hide();
$('.accordion>dt').on('click',function(){
if($(this).next('dd').css('display')=='none'){
$('dd').slideUp();
$(this).next('dd').slideDown();
};
});
});
</script>