🐈

階層付きWordPressメニューをjQueryでアコーディオンにする

2 min read

WordPressの階層付きのメニューを、なんとかアコーディオンにしたい。

この記事は個人ブログから移転しました。引越し元の記事からはリダイレクトしています。

完成品

こんな感じで動きます。

メニューはこう。

参考

https://matthewaprice.com/article/simple-wordpress-accordion-menu/

何を改善したか

矢印をつけました。

HTML

menu.blade.php
<aside id="global-menu">
         @if (has_nav_menu('global_menu'))
             {!! wp_nav_menu(['theme_location' => 'global_menu', 'menu_class' => '', 'echo' => false]) !!}
         @endif
</aside>

</div>

bladeを使ってます、注意。

SCSS

Tailwindを使ってます。

gui.scss
/**
/* メニュー
/* https://blog.sasigu.me/entry/jquery-accordion-wp-menu
/*-- */
#global-menu {

  ul:not(.sub-menu) {
    > li {
      @apply mb-3;

      /* 親となるリンク */
      > a {
        @apply p-3 bg-gray-100 font-bold relative;

        &::after {
          @apply block absolute;
          transition: 0.3s;
          content: '';
          right: 20px;
          top: 12px;
          width: 16px;
          border-width: 4px;
          height: 16px;
          transform: rotate(45deg);
          border-color: transparent #666 #666 transparent;
        }

        &.open::after {
          /* 矢印を回転 */
          top: 20px;
          transform: rotate(-135deg);
        }
      }
    }
  }

  ul {
    @apply flex flex-col list-none gap-3;

    li {
      a {
        /* 共通 */
        @apply inline-block w-full rounded-md;
      }

      > ul {
        @apply flex flex-col gap-1 mt-3;

        > li > a {
          @apply text-sm p-2;
        }
      }
    }
  }
}

回転させています。

JavaScript

Webpackでコンパイルする前提です。

gui.js
import 'jquery';

jQuery(function () {
  // グローバルメニュー
  $('#global-menu ul.sub-menu').hide();
  $('#global-menu li.current-menu-item').children().show();
  $('#global-menu li.current-menu-item').parents().show();

  $('#global-menu ul li a').on('click', function () {
    var checkElement = $(this).next();
    // 他のやつを解除
    $(this).parent().siblings('li').children('a').removeClass('open');
    if (checkElement.is('ul') && checkElement.is(':visible')) {
      $(this).removeClass('open');
      checkElement.slideUp('normal');
      return false;
    } else {
      $(this).addClass('open');
      $(this).parent().siblings('li:has(ul)').find('ul').slideUp('normal');
      $('#global-menu ul ul li ul:visible').slideUp('normal');
      checkElement.slideDown('normal');
      return false;
    }
  });
});

GitHubで編集を提案

Discussion

ログインするとコメントできます