如何切換與兄弟選擇器下拉菜單上的箭頭

Question

嗨我正在使用下面的菜單結構的響應網站，與一些幫助我設法讓子菜單的打開和關閉任何菜單項已打開兩個子菜單級別。

我想將toggleClass（'open'）添加到我的腳本中，但我無法弄清楚它需要去的位置，以便當菜單項打開並通過單擊頁眉切換並切換時切換類當另一個菜單項被打開時返回到.closed。我可以通過在功能頂部添加$(this).toggleClass('open');來點擊標題時切換它，但是如果打開不同的菜單項，它不會再次切換。

HTML：

<nav id="main-nav" role="navigation"> 
     <div class="block"> 
      <h2 class="block-title">Main menu</h2> 
      <ul> 
       <li class="is-active"> 
        <a href="#">Link</a> 
       </li><!-- 
      --><li> 
        <a class="toggle-sub-nav closed" href="#">Link ></a> 
         <ul class="sub-nav"> 
          <li><a href="#">Sub link</a></li> 
          <li><a href="#">Sub link</a></li> 
          <li><a href="#">Sub link</a></li> 
         </ul> 
       </li><!-- 
      --><li> 
        <a href="#">Link</a> 
       </li><!-- 
      --><li> 
        <a class="toggle-sub-nav closed" href="#">Link ></a> 
        <ul class="sub-nav"> 
          <li><a href="#">Sub link</a></li> 
          <li> <a class="toggle-sub-nav closed" href="#">Sub Link ></a> 
        <ul class="sub-nav"> 
          <li><a href="#">Sub link</a></li> 
          <li><a href="#">Sub link</a></li> 
          <li><a href="#">Sub link</a></li> 
         </ul></li> 
          <li><a href="#">Sub link</a></li> 
         </ul> 
       </li><!-- 
      --><li> 
        <a href="#">Link</a> 
       </li> 
      </ul> 
      </div> 
</nav> 

子菜單CSS：

.sub-nav { 

    height: 0px; 
    -webkit-transition: all 600ms cubic-bezier(.42,0,.58,1); 
    -moz-transition: all 600ms cubic-bezier(.42,0,.58,1); 
    -o-transition: all 600ms cubic-bezier(.42,0,.58,1); 
    -ms-transition: all 600ms cubic-bezier(.42,0,.58,1); 
    transition: all 600ms cubic-bezier(.42,0,.58,1); 
    overflow:hidden; 

    } 


    .sub-nav-open { 

    height: auto; 
    max-height: 500px; 

    } 

.sub-nav li { background-color: #666; } 

.closed { background: url(../assets/img/arrows.png) no-repeat 90% -24px; } 

.open { background: url(../assets/img/arrows.png) no-repeat 90% 17px; } 

的Jquery：

$(function() { 
    $(".toggle-sub-nav").click(function() { 
     if ($(this).siblings('ul').hasClass('sub-nav-open')) { 
      $(this).siblings('ul').find('sub-nav-open').andSelf().removeClass('sub-nav-open') 
     } else { 
      $('.sub-nav').not($(this).closest('.sub-nav')).removeClass('sub-nav-open'); 
      $(this).next(".sub-nav").toggleClass('sub-nav-open'); 
     } 
     return false; 
    }); 
}); 

Answer 1

很多玩耍後，我已經修改了jQuery和有工作我如何要求，我留下的唯一問題是當您打開二級子菜單時，會重置最上層的箭頭圖像湖我真的不知道如何實現這一目標，所以任何想法表示讚賞，或者如果您有任何的清潔解決方案，我將非常樂意傾聽它？：

下面是修改的功能：

$(function() { 
    $(".toggle-sub-nav").click(function() { 
     if ($(this).siblings('ul').hasClass('sub-nav-open')) { 
      $(this).removeClass('open').siblings('ul').find('sub-nav-open').andSelf().removeClass('sub-nav-open') 
     } else { 
    $('.toggle-sub-nav').not($(this).closest('.toggle-sub-nav')).removeClass('open'); 
      $('.sub-nav').not($(this).closest('.sub-nav')).removeClass('sub-nav-open'); 
      $(this).toggleClass('open').next(".sub-nav").toggleClass('sub-nav-open'); 
     } 
     return false; 
    }); 
});