Переключить навигационную иконку назад

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/