wordpress foundation手风琴移动子菜单

Question

我正在尝试将手风琴功能整合到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但stuggle是当你点击菜单中的项目时，所有带有子菜单的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菜单处于同一级别。

in 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> 

了短路电流代码实际上工作了一点，但我们不希望只点击一个里打开所有的submemnu。

这里是

Answer 1

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

制造它的工作使用.find()这样，你将需要的款式，因为.off-canvas-submenu它不是在同一级别的其他元素了，以不继承第一级的风格<ul>但在所有你应该我好。

编辑：

可用于多个子

<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> 
     <li> 
      <a href="#" class="off-canvas-submenu-call">Option 3 <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>