형제 선택기를 사용하여 드롭 메뉴에서 화살표를 전환하는 방법

Question

안녕하세요 저는 두 가지 하위 메뉴에서 이미 열려있는 메뉴 항목을 열거 나 닫는 데 도움이되는 도움을 받아 반응 형 웹 사이트의 아래 메뉴 구조를 사용하고 있습니다. 메뉴 수준.

내 스크립트에 toggleClass ('open')를 추가하려고하지만 메뉴 항목을 열고 닫고 토글을 클릭하여 클래스를 전환 할 수있는 위치를 파악할 수 없습니다. 다른 메뉴 항목이 열리면 닫습니다. 기능 상단에 $(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를 수정 한 그것은 어떻게 작동 한 I 요청한 경우, 내가 남긴 유일한 문제는 두 번째 레벨 하위 메뉴를 열면 맨 위에있는 화살표 이미지의 화살표 이미지가 재설정됩니다. 엘. 정말 그래서 어떤 아이디어가 감사 것을 달성하는 방법을 잘 모르겠습니다 또는 당신의 어떤 청소기 솔루션이 있다면 나는 여기

을? : 수정 된 기능입니다 듣고 싶어요 :

$(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; 
    }); 
});