wordpress基础手风琴移动子菜单

我正在尝试将手风琴功能集成到wordpress菜单中。

我遇到了一个代码，但它并没有给我完全的期望(不是真正的js大师(。

这是html代码：

<div class="off-canvas-wrap" data-offcanvas>
    <div class="inner-wrap">
        <nav class="tab-bar">
            <section class="left-small">
                <a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
            </section>
        </nav>
        <aside class="left-off-canvas-menu">
            <ul class="off-canvas-list">
                <li><label>Foundation</label></li>
                <li><a href="#">Option 1</a></li>
                <li><a href="#" class="off-canvas-submenu-call">Option 2 <span class="right"> + </span></a></li>
                <ul class="off-canvas-submenu">
                    <li><a href="#">Sub menu 1</a></li>
                    <li><a href="#">Sub menu 2</a></li>
                    <li><a href="#">Sub menu 3</a></li>
                </ul>
                <li><a href="#">Option 3</a></li>
                <li><a href="#" class="off-canvas-submenu-call">Option 4 <span class="right"> + </span></a></li>
                <ul class="off-canvas-submenu">
                    <li><a href="#">Sub menu 1</a></li>
                    <li><a href="#">Sub menu 2</a></li>
                    <li><a href="#">Sub menu 3</a></li>
                </ul>
                <li><a href="#">Option 5</a></li>
                <li><a href="#">Option 6</a></li>
            </ul>
        </aside>
    <section class="main-section">
    Content
    </section>
    <a class="exit-off-canvas"></a>
    </div>
</div>

这是jscript:

   $(document).foundation();
            $(".off-canvas-submenu").hide();
                $(".off-canvas-submenu-call").click(function() {
                     var icon = $(this).parent().next(".off-canvas-submenu").is(':visible') ? '+' : '-';
                     $(this).parent().next(".off-canvas-submenu").slideToggle('fast');
                     $(this).find("span").text(icon);
                });

这只适用于静态页面，也适用于wordpress，但问题是，当你点击菜单中的项目时，所有带有子菜单的li都会打开，而不是一次打开一个。注意菜单的html结构：

<aside class="left-off-canvas-menu">
    <ul class="off-canvas-list">
        <li><label>Foundation</label></li>
        <li><a href="#">Option 1</a></li>
        <li><a href="#" class="off-canvas-submenu-call">Option 2 <span class="right"> + </span></a></li>
        <ul class="off-canvas-submenu">
            <li><a href="#">Sub menu 1</a></li>
            <li><a href="#">Sub menu 2</a></li>
            <li><a href="#">Sub menu 3</a></li>
        </ul>
        <li><a href="#">Option 3</a></li>
        <li><a href="#" class="off-canvas-submenu-call">Option 4 <span class="right"> + </span></a></li>
        <ul class="off-canvas-submenu">
            <li><a href="#">Sub menu 1</a></li>
            <li><a href="#">Sub menu 2</a></li>
            <li><a href="#">Sub menu 3</a></li>
        </ul>
        <li><a href="#">Option 5</a></li>
        <li><a href="#">Option 6</a></li>
    </ul>
</aside>

ul子菜单与li菜单处于同一级别。

在wordpress中，ul.submenu位于父li菜单中。

<aside class="left-off-canvas-menu">
    <ul class="off-canvas-list">
        <li><label>Foundation</label></li>
        <li><a href="#">Option 1</a></li>
        <li>
            <a href="#" class="off-canvas-submenu-call">Option 2 <span class="right"> + </span></a>
            <ul class="off-canvas-submenu">
                <li><a href="#">Sub menu 1</a></li>
                <li><a href="#">Sub menu 2</a></li>
                <li><a href="#">Sub menu 3</a></li>
            </ul>
        </li>
    </ul>
</aside>

当前的代码实际上工作了一点，但我们不想只点击一个li就打开所有的子菜单。

这是代码笔