다른 LI 항목을 클릭 할 때 드롭 다운 캐럿 변경

Question

웹 사이트를 만들고 드롭 다운에서 일부 캐럿에 문제가 있습니다.

나는 사이드과 같이 있습니다

Home 
Menu item v 
    Sub-menu item 
    Sub-menu item 2 
Menu item 2 > 
Menu item 3 > 

경우 :

Home 
Menu item > 
Menu item 2 > 
Menu item 3 > 

나는 작은 캐럿 아이콘으로 V>에서가는 등 같은 드롭 다운 컨텐츠를 확장 메뉴 항목을 클릭하면 메뉴 항목 v를 클릭합니다 - 캐럿이 v에서>로 다시 이동합니다. 나는 그렇게 할 때 메뉴 항목 얻는 방법

Home 
Menu item v 
Menu item 2 v 
    Sub-menu item 
    Sub-menu item 2 
Menu item 3 > 

: 나는 메뉴 항목 2> 예를 들어, 메뉴 항목이 열립니다 클릭 만하면

그러나, 메뉴 항목에 캐럿 V 그래서 등 유지 2 메뉴 항목 (V)이 메뉴 항목으로 다시 변경됩니다 클릭되었을>

내 JS로 이것을 가지고

내 드롭 다운 다음과 같습니다

$('.dropdown').click(function(){ 
    $(this).find('.nav-arrow').toggleClass('fa-angle-left fa-angle-down'); 
}); 

$('.dropdown').click(function(){ 
    $('.collapse').collapse('hide'); 
}) 

:

H 오메

<li class="dropdown"><a data-toggle="collapse" href="#">Menu item<i class="nav-arrow fa fa-angle-left pull-right"></i></a> 
    <ul class="collapse"> 
     <li><a href="#">Sub menu item</li> 
     <li><a href="#">Sub-menu item 2</a></li> 
    </ul> 
</li> 

<li class="dropdown"><a data-toggle="collapse" href="#">Menu item 2 <i class="nav-arrow fa fa-angle-left pull-right"></i></a> 
    <ul class="collapse"> 
     <li><a href="#">Sub menu item</li> 
     <li><a href="#">Sub-menu item 2</a></li> 
    </ul> 
</li> 

<li class="dropdown"><a data-toggle="collapse" href="#">Menu item 3 <i class="nav-arrow fa fa-angle-left pull-right"></i></a> 
    <ul class="collapse"> 
     <li><a href="#">Sub menu item</li> 
     <li><a href="#">Sub-menu item 2</a></li> 
    </ul> 
</li> 

Answer 1

는 가장 먼저 변환하기 만하면됩니다 모두 왼쪽에 직면 캐럿에 <li> 요소의 다음은 대상 요소를 다시 변경합니다. 개방 및 폐쇄되는 어떤 캐럿 알 수있는 (단순) 방법이 없다 불행하게도, 그것은 명시 적으로 변경하는 것이 가장 좋습니다 :이 도움이

$('.dropdown').click(function(){ 
    $('.nav-arrow').removeClass('fa-angle-down'); 
    $('.nav-arrow').removeClass('fa-angle-left'); 
    $(this).find('.nav-arrow').removeClass('fa-angle-left'); 
    $(this).find('.nav-arrow').addClass('fa-angle-down'); 
}); 

희망!

Answer 2

메뉴를 열고 닫은 경우와 메뉴에서 다른 항목을 선택하여 메뉴를 전환 한 경우를 처리 할 것입니다.

jQuery(".dropdown").click(function(event){ 
    // Evaluate the target of the click event was already opened. 
    if(jQuery(event.target).hasClass("fa-angle-down")){ 
    // Change the caret to looks like they are closed. 
    jQuery(event.target).removeClass("fa-angle-down").addClass("fa-angle-left"); 

    // Evaluate the target of click event was not opened. 
    }else{ 
    // Remove any opened menu items carets. 
    jQuery(".dropdown.fa-angle-down").removeClass("fa-angle-down").addClass("fa-angle-left"); 
    // Add the appropriate caret to the newly opened menu item. 
    jQuery(event.target).removeClass("fa-angle-left").addClass("fa-angle-down"); 
    } 
}); 

질문이 있거나 개선하기 위해 개선 할 수 있다면 알려주세요. 편집의 조금으로