Javascript 单击其他LI项目时更改下拉插入符号

我正在创建一个网站，在我的下拉列表中有一些插入符号

我有这样一个侧边栏：

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 >

如果我点击菜单项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');
})

我的下拉列表如下所示：

主页

<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> 

您需要做的是首先将

的所有元素转换为左向插入符号，然后只将目标元素更改回原来的位置。不幸的是，由于没有（简单的）方法知道哪些插入符号是打开的，哪些是关闭的，因此最好明确地更改它们：

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

---

希望这有帮助

我认为这将处理您通过选择菜单中的另一项来切换菜单打开和关闭的情况

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");
  }
});

---

如果您有任何问题，或者我是否可以对此进行改进以使其更好地为您服务，请告诉我。

稍加编辑即可：

$（'.dropdown'）。单击（function（）{$（'.nav arrow'）。removeClass（'fa-angle-down'）；$（this）。查找（'fa-angle-left'）；$（this）。查找（'nav arrow'）。addClass（'fa angle-down'）$（此）.find（'.nav arrow'）.addClass（'fa-angle-left'）；$（'.collapse'）.collapse（'hide'）；}）；

感谢您的帮助！