单击其他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 >

如果我单击菜单项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> 

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

让我知道您是否有任何疑问，或者我是否可以对此进行改进以使其更适合您。