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>