jQueryでアコーディオンメニュー

ワードプレスのスマホメニュー実装時、クリックでぱかっと上下に開くアコーディオンメニューについて色々悩んだのでメモ。

ワードプレスのアコーディオンメニュー

ワードプレスのアコーディオンメニュー

子メニューがある親要素のみ、”＞”マークを付ける。
メニューをクリックすると子メニューが出てきて、”＞”が下を向く。
クリックでまた閉じる。マークも元に戻る。

という実装になります。

ワードプレスのカスタムメニュー呼び出し

ワードプレスなので、htmlでのメニューの呼び出しはシンプルです。

モバイル時のみのメニューなので、.js-mobile-menuというクラスで囲ってみました。

iタグは閉じるボタンなのでこの記事では触れません。

<nav class="js-mobile-menu">
<div class="js-close-btn"><i class="fas fa-times"></i></div>
<?php
wp_nav_menu(
array(
'theme_location' => 'mobile',
'container' => false
)
);
?>
</nav><!-- /header-nav -->

ワードプレスのカスタムメニューに自動で付与されるCSSを使う

cssには独自のクラスよりも、デフォルトで付与されるクラスを使いました。

こちらのサイト様で丁寧に解説されています。（クラスに関しては中盤から）

カスタムメニュー機能の設定と設置と書き出されるソースコードを分かりやすく紹介します

そんなデフォルトのcssを使って書いた最低限のcssがこちら。

.js-mobile-menu ul.menu li {
font-size: 1.6rem;
padding: 18px 20px;
}

.js-mobile-menu ul.menu li a {
display: block;
}

/*.menu-item-has-childrenは子メニューを持つ親メニューにつくクラス*/
.js-mobile-menu li.menu-item-has-children a{
position: relative;
}
/*メニューが閉じてる時のアイコン設定*/
.js-mobile-menu li.menu-item-has-children > a:after {
font-family: "Font Awesome 5 Free";
content: '\f105';
font-weight: 900;
position: absolute;
top: 0;
right: 50px;
}

/*メニューが開いてる時のアイコン設定*/
.js-mobile-menu li.menu-item-has-children.visible > a:after {
font-family: "Font Awesome 5 Free";
content: '\f107';
font-weight: 900;
position: absolute;
top: 0;
right: 50px;
}

ほんとんどがアイコンに関する記述ですね^^;

/*メニューが開いてる時のアイコン設定*/に書かれている.visibleというクラス。こちらをjqueryで付け外しすることでアイコンを切り替えます。

jQuery

今回はワードプレスなので、’jQuery’から始まっていますが、適時書き換えていただければ。

jQuery(document).ready(function(){

//最初は.sub-menu(子メニューを囲むul)を隠す
jQuery(".js-mobile-menu .sub-menu").hide();
//.sub-menuを持つli(親メニュー)をクリックでイベント発火
jQuery(".js-mobile-menu li.menu-item-has-children").on('click', function () {

//クリックした親メニューそのものを変数へ代入
let　$parentMenu = jQuery(this);
//クリックした要素の子メニューのみをトグル
jQuery(".sub-menu", this).slideToggle();
//親メニューに.visibleクラスをつけはずししてアイコンを変化させる
jQuery($parentMenu).toggleClass('visible');

});

});

jQuery(“.sub-menu”, this).slideToggle();

という書き方で、thisの.sub-menu、という指定ができるようです。

そうでないとクリックしてない子メニューまで開いてしまうので、子要素の指定は必須！