読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

アコーディオンメニュー応用

dl 要素で設定した場合

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>アコーディオンメニュー</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function() {
  $( '.news>dd' ).hide();
  $( '.news>dt' ).on( 'click', function() {
    $( '.news>dd' ).slideUp();
    if( $( '+dd',this).css( 'display' ) == 'none' ) {
      $( '+dd',this).slideDown();
    }
  });
});
</script>
</head>
<div id="sidebar">
<dl class="news">
<dt>カテゴリA</dt>
<dd>ここに内容Aが入る。ここに内容Aが入る。ここに内容Aが入る。ここに内容Aが入る。ここに内容Aが入る。ここに内容Aが入る。ここに内容Aが入る。</dd>
<dt>カテゴリB</dt>
<dd>ここに内容Bが入る。ここに内容Bが入る。ここに内容Bが入る。ここに内容Bが入る。ここに内容Bが入る。ここに内容Bが入る。ここに内容Bが入る。</dd>
<dt>カテゴリC</dt>
<dd>ここに内容Cが入る。ここに内容Cが入る。ここに内容Cが入る。ここに内容Cが入る。ここに内容Cが入る。ここに内容Cが入る。ここに内容Cが入る。</dd>
</dl>
</div>
</body>
</html>
next()メソッド
  • 1つ次に来る(隣接)「兄弟」要素を選択
<script>
$(document).ready(function() {
  $( '.news>dd' ).hide();
  $( '.news>dt' ).on( 'click', function() {
    $( '.news>dd' ).slideUp();
    if( $( this ).next().css( 'display' ) == 'none' ) {
      $( this ).next().slideDown();
    }
  });
});
</script>