切換導航圖標返回

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/