切换导航图标返回

Question

我正在构建下拉导航菜单，并尝试使用单击菜单项时来回切换的图标。我已经能够达到图标将要切换的地步，但是我遇到的麻烦是，当选择了另一个下一个菜单选项时，我无法使上一个图标切换回来。

因此，例如，当第一个选项被点击时，加号变成减号，这很好。但是当我点击第二个选项时，我似乎无法弄清楚如何获得第一个选项以返回加号。

$('#category-tabs li a').click(function() { 
 
    $(this).find('i').toggleClass('fa-plus-circle fa-minus-circle'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/> 
 

 

 
<nav class="navbar navbar-inverse"> 
 
    <div class="container-fluid" id="category-tabs"> 
 
    <ul class="nav navbar-nav"> 
 
     <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="javscript:void(0);">Category 1 <i class="fa fa-plus-circle"></i></a> 
 
     <ul class="dropdown-menu"> 
 
      <li><a href="#">Option 1</a></li> 
 
      <li><a href="#">Option 2</a></li> 
 
      <li><a href="#">Option 3</a></li> 
 
     </ul> 
 
     </li> 
 
     <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="javscript:void(0);">Category 2 <i class="fa fa-plus-circle"></i></a> 
 
     <ul class="dropdown-menu"> 
 
      <li><a href="#">Option 1</a></li> 
 
      <li><a href="#">Option 2</a></li> 
 
      <li><a href="#">Option 3</a></li> 
 
     </ul> 
 
     </li> 
 
     <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="javscript:void(0);">Category 3 <i class="fa fa-plus-circle"></i></a> 
 
     <ul class="dropdown-menu"> 
 
      <li><a href="#">Option 1</a></li> 
 
      <li><a href="#">Option 2</a></li> 
 
      <li><a href="#">Option 3</a></li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</nav>

Here is the fiddle有没有什么帮助的。

谢谢你看看这个，我很新，可以使用我可以得到的所有帮助。

Answer 1

只需卸下减号图标，添加加号图标：

$('#category-tabs li a').click(function() { 
    var $icon = $(this).find('i'); 
    var isOpen = $icon.hasClass('fa-minus-circle'); 
    $("#category-tabs").find('i').removeClass('fa-minus-circle').addClass('fa-plus-circle'); 
    if (isOpen) { 
    $icon.removeClass().addClass('fa fa-plus-circle'); 
    } else { 
    $icon.removeClass().addClass('fa fa-minus-circle'); 
    } 

}）;

工作小提琴：http://fiddle.jshell.net/zcqrmn66/17/