jQuery – モバイルメニューのサブメニューを折りたたみにする簡単な方法

WordPressテーマ【Cocoon】をカスタマイズしたWebサイトのモバイルメニューのサブメニューを、アコーディオン（折りたたみ式）にして欲しいという案件がありました。そのためには、サブメニューの親要素（サブメニューを持つ親メニュー）のリンクを無効化し、サブメニューを開くためのボタンとする必要もあります。
方法は至って簡単で、jQueryと少しのCSSを使うだけです。
当該案件はWordPressテーマ【Cocoon】をカスタマイズしたサイトのモバイルスライドインメニューにおいてでしたが、テーマに関わらず有効な方法だと思います。

親メニュー項目にクラスを付ける

まず、準備段階として、サブメニューを持つ親要素を作り、任意のクラスを付けます。
例えば以下のようなメニューがあるとします。

このメニューの「会社概要」をサブメニューに入れ、その親に「会社案内」という項目を作ります。

カスタムリンクでとりあえず適当なURLを入れて「会社案内」を作ります。

作ったカスタムリンクを親メニューに置き、「会社概要」含めてそのサブメニューにします。

カスタムリンク「会社案内」のURLを削除（空欄）し、「CSS class (オプション)」に button を追加します。

もし「CSS class (オプション)」の入力箇所が見当たらない場合は、管理画面上部の表示オプションを確認してください。

以下は上記で作った単純なメニューのソースコードです（WordPressテーマ【Cocoon】のモバイルスライドインメニューのコードから今回不要なClassを削除しています）。「会社案内」にbuttonクラスが追加されています。
また、「会社概要」ページを開いた状態でのソースですので、「会社案内」項目に current-menu-ancestor 、「会社概要」項目に current-menu-item が付加されています。

<div id="navi-menu-content" class="navi-menu-content menu-content">
	<label class="navi-menu-close-button menu-close-button" for="navi-menu-input"><span class="fas fa-times" aria-hidden="true"></span></label>
	<ul class="menu-drawer">
		<li class="menu-item"><a href="https://example.com/">ホーム</a></li>
		<li class="button menu-item current-menu-ancestor"><a>会社案内</a>
			<ul class="sub-menu">
				<li class="menu-item current-menu-item"><a href="https://example.com/company" aria-current="page">会社概要</a></li>
				<li class="menu-item"><a href="https://example.com/company/greeting"ごあいさつ</a></li>
				<li class="menu-item"><a href="https://example.com/blog">ブログ</a></li>
			</ul>
		</li>
		<li class="menu-item"><a href="https://example.com/contact">お問い合わせ</a></li>
	</ul>
</div>

会社案内のところがサブメニューを持つメニューになります。

jQuery の slideToggle と toggleClass を使って開閉式に

slideToggle([speed], [callback])

各要素の高さを操作して、slideDown/slideUpの動作を交互に行います。

toggleClass(class)

指定したCSSクラスが要素に無ければ追加し、あれば削除します。

	$('.navi-menu-content li.button').click(function(e) {
		$(this).children('ul.sub-menu').slideToggle(300, "linear");
		$(this).children('ul.sub-menu').toggleClass("active");
		e.stopPropagation();
	});

toggleClass で追加・削除する activeクラスは、メニューの初期状態でサブメニューを非表示にしておくためです。

CSSでメニューのデフォルト状態とページ遷移後の表示を決める

メニューの初期状態をサブメニュー非表示とし、また、リンクをクリックしてページ遷移後、メニューにおける現在ページ項目と同じ親メニュー項目に属するサブメニューを開いたままにしたかったので、CSSに追記します。

.navi-menu-content .button:not(.current-menu-item):not(.current-menu-ancestor) > .sub-menu:not(.active) {
display: none;
}

デモ

See the Pen
モバイルメニューのためのサブメニュー折りたたみ by J. (@umvjcqzk)
on CodePen.

以上、ご参考になれば幸いです。
ありがとうございます。