JavaScript»ウェブ»jQuery応用編 アコーディオンメニューを作成する

ファイル名: js-web/quest_03184.html

1番目の親
1番目の子
2番目の親
2番目の子
3番目の親
3番目の子

下のソースコードを写して、アコーディオンメニューを作成してください。

ソースコード

<div id="accordion">
  <div class="parent">
    1番目の親
    <div>1番目の子</div>
  </div>  
  <div class="parent">
    2番目の親
    <div>2番目の子</div>
  </div>    
  <div class="parent">
    3番目の親
    <div>3番目の子</div>
  </div>
</div>

<style>
  #accordion {
    width: 320px;
    height: 200px;
    border: solid 1px #000;
  }
  .parent {
    margin: 0px;
    background-color: #ccc;
    font-size: 25px;
  }
  .parent > div {
    background-color: #fff;
  }
</style>

<script src='https://code.jquery.com/jquery-3.2.1.min.js'></script>
<script>
$(function() {
  $('.parent > div').hide();
  $('.parent').click(function() {
    $('.parent').children().slideUp();
    $(this).children().slideDown();
  });
});
</script>

解説

要素内の要素を「子要素」と呼びます。たとえば、<div><p>Hello!</p></div>と要素が並んでいる場合、divを親要素、pを子要素とみなすことができます。

このコードでは、クリックイベントが起きたとき、parentの子要素をすべて上に隠し、クリックされた要素の子要素のみ下にスライドで表示します。