【スマートフォン対応】アコーディオンメニューをjQueryで実装する方法

多くのメニュー項目を省スペースで表示することはCSSのドロップダウンメニューでも可能ですが、マウスホバーをトリガーとする方法ではカーソルのないスマートフォンに対応できません。定番のjQueryを使ったアコーディオンメニューならクリック（タップ）をトリガーにできるためスマートフォンでの閲覧にも対応できます。

HTMLで階層構造を作る

まずは階層構造のあるメニューを作りましょう。メニュー項目であればHTMLのリストタグを使った方法が最も一般的でしょう。

<ul class="original-menu">
    <li><p class="menu-open">親項目1</p>
        <ul class="menu-child">
            <li><a href="#">子項目1</a></li>
            <li><a href="#">子項目2</a></li>
            <li><a href="#">子項目3</a></li>
        </ul>
    </li>
    <li><p class="menu-open">親項目2</p>
        <ul class="menu-child">
            <li><a href="#">子項目1</a></li>
            <li><a href="#">子項目2</a></li>
            <li><a href="#">子項目3</a></li>
        </ul>
    </li>
</ul>

このように複数のメニュー項目を有するメニューブロックを子要素として内包した親メニューを用意します。

CSSでメニューを非表示にする

次にCSSで子メニューを非表示にします。

.menu-child {
    display: none;
}

メニューのデザインなどは下記の記事をご参照ください。

ドロップダウンメニュー（プルダウンメニュー）をHTMLとCSSだけで簡単に作る方法

jQueryでクリックしたらメニューを表示するようCSSを制御する

あとはjQueryでメニュー名（親項目）がクリックされるたびに子項目群が表示・非表示を切り替えるように制御します。

下記のソースコードをhead内に記述します。

<script>
$(function(){ // このドキュメントが読み込まれたら次の処理を実行
$(".menu-open").on("click", function() { // menu-openクラスがクリックされたときに次の処理を実行
$(this).children().slideToggle(); // この要素の子要素が表示されていたら非表示、非表示だったら表示する（toggleメソッド）
});
});
</script>

これだけです。

引数やDOM要素を変えるだけで様々な指定方法が可能です。

例えば下記のような指定が可能です。

$(this).parent().slideToggle(); // この要素の親要素が表示されていたら非表示、非表示だったら表示する

$(this).siblings().slideToggle(); // この要素の兄弟要素が表示されていたら非表示、非表示だったら表示する

// menu-openクラスの子要素が表示されていたら非表示、非表示だったら表示する（menu-openクラスの子要素全てに適用されます）
$(".menu-open").children().slideToggle();

WordPressでjQueryを使用する方法については下記の記事をご参照ください。

jQueryをWordPressで使う場合の読み込み方と使い方

マウスホバーで開くアコーディオンメニューを作る方法

jQueryでもクリックではなくマウスホバーをトリガーとすることができます。

単純に表示/非表示を切り替えることも可能ですが、せっかくなのでスライドさせましょう。

<script>
$(function(){ // このドキュメントが読み込まれたら次の処理を実行
$(".menu-open").mouseover(function(e) { // menu-openクラスにマウスカーソルが被った時に次の処理を実行
$(this).children().stop().slideDown(); // この要素の子要素をスライドダウン（アニメーション処理を中止）
});
$(".menu-open").mouseout(function(e) { // menu-openクラスからマウスカーソルが離れたときに次の処理を実行
$(this).children().stop().slideUp(); // この要素の子要素がをスライドアップ（アニメーション処理を中止）
});
});
</script>

こちらもソースコードをhead内に記入すればOKです。