webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき
読者です 読者をやめる 読者になる 読者になる

webかたつむり

ウェブデザインを勉強中

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(); は格好良くないし、段取りが2つだから良くない。
  • ここは、やはり、$('.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();
    });

f:id:ohta-felica:20160522111422j:plain

  • .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>

f:id:ohta-felica:20160522111157j:plain

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

f:id:ohta-felica:20160522111747j:plain

  • 機能しません。

('display')=='none'

  • 戻り値は、文字列。

f:id:ohta-felica:20160522143138j:plain

f:id:ohta-felica:20160522143710j:plain

f:id:ohta-felica:20160522144059j:plain

完成!

<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>