ブログ

メニューに複数のアコーディオンを設置

by Yasuko

メニュー内にアコーディオンを複数設置した時に、バラバラの動きをさせるのにてこずったのでメモ。

クラスをつけてやればいいじゃないか！

たとえばこんな ul要素の中の li があったとして、

<li class="l-drawer__item accordion">親MENU
  <div class="accordion-content">
    <ul class="accordion-nav">
      <li><a href="#">子MENU01</a></li>
      <li><a href="#">子MENU02</a></li>
      <li><a href="#">子MENU03</a></li>
    </ul>
  </div>
</li>

最初は .accordion-content を display: none; で非表示にしておいて・・・

.accordion-content {
    display: none;
}

親MENUの .accordion がクリックされたら、.openクラスを操作してあげる。

$( '.accordion' ).on( 'click', function() {
  if ($(this).hasClass('open')) {
    $(this).removeClass('open');
  } else {
    $(this).addClass('open');
  }
});

.open がついたら display: block; で表示させます。

.accordion.open .accordion-content {
    display: block;
}

出来てみたらなんてことないんだけど、ここまで辿り着くのにつまづいてしまったので、また困らないようにじぶんのために記事にしておきます！