Изменение выпадающего шаблона на клик другого элемента LI

Question

Я создаю веб-сайт и имею проблемы с некоторыми каретками в своем раскрывающемся списке.

У меня есть боковая панель, как так:

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

При нажатии на пункт меню иконка немного каретка идет от> к V и расширяет содержание раскрывающийся как так:

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

If Я нажимаю на пункт меню v - каретка переходит от v к> снова, что является правильным.

Однако, если нажать на пункт меню 2>, например, пункт меню 2 открывается, но каретка по пункту меню остается, как v так:

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

Как я могу получить это так, когда пункт меню 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> элементов в левую обращенной каретку, а затем изменить только целевой элемент назад. К сожалению, нет (простого) способа узнать, какие CARETS открыты и которые закрыты, то лучше менять их в явном виде:

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

Сообщите мне, если у вас есть вопросы или если я могу улучшить это, чтобы сделать его лучше для вас.