[WordPress] 透過 wp_nav_menu() 製作可以互動的下拉式次選單

在 WordPress 如果有想在手機版的選單製作可以點擊後收合展開的次選單效果，可以透過 wp_nav_menu() 建立選單時，添加參數去設定。

首先先記得這張圖，等等會用到

圖片來源

所以我們在建立選單時，可以參考文件在建立時增加我們要的 HTML 區塊，也就是如果我想建立一個可以點擊的按鈕，就可以加上以下的內容：

wp_nav_menu([
    'menu'=>"main-menu",
    'after'  => '<span class="menu-toggle"><svg width="11" height="8" viewBox="0 0 11 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 1L5.5 7L10 1" stroke="white"/>
</svg> </span>',
])

這樣就可以在 after 那個位置增加一個 svg 的圖形，接著就可以依據產出來的結構，像這樣做到增加下拉式選單的效果了。

$(".menu-toggle").click(function(e){
    e.stopPropagation();
    $(this).toggleClass("active")
    $(this).next(".sub-menu").slideToggle();
})