【jQuery】開閉するアコーディオンメニューの作り方

アコーディオンメニュー

jQueryで開閉するアコーディオンメニューと開閉に合わせアイコンをアニメーションさせる方法をご紹介します。

アコーディオンメニュー

jQuery

$(function() {
    $('.accordion li').click(function() {
    $(this)
      .children('.subMenu').slideToggle();

    if ($(this).children('.menu').hasClass('active')) {
        $(this).children('.menu').removeClass('active');
     } else {
        $(this).children('.menu').addClass('active');
       }
    return false;
  });
});

jQueryの読み込みが完了したら、上記の内容を記述します。何をやっているのか簡単に説明すると、クリックしたら「active」というクラスが追加され、「active」というクラスが付いている場合はそのクラスを削除するという指定をしています。

jQueryの読み込み方については過去記事を参考にしてください。

CSS

.active .icon {
      transform: rotate(45deg);
    }

CSSのアニメーションの設定はこれだけです。「active」というクラスが追加された時にアイコンを左に45度回転するよう指定しています。

全体のコードは下記を参照してみてください。

See the Pen Accordion Menu by uquico (@uquico) on CodePen.


以上、jQueryを使ってのアコーディオンメニューの作り方でした。

Leave a Comment