탐색 아이콘 토글 전환

Question

드롭 다운 탐색 메뉴를 작성 중이며 메뉴 항목을 클릭 할 때 앞뒤로 전환하는 아이콘을 사용하려고합니다. 나는 아이콘이 토글 될 지점까지 그것을 얻을 수 있었지만, 내가 가지고있는 문제는 다른 다음 메뉴 옵션이 선택되었을 때 이전 아이콘이 토글되지 않게 할 수 있다는 것이다.

예를 들어, 첫 번째 옵션을 클릭하면 더하기 기호가 마이너스로 바뀝니다. 그러나 두 번째 옵션을 클릭하면 첫 번째 옵션을 다시 플러스로 가져 오는 방법을 알아낼 수 없습니다.

Here is the fiddle이 전혀 도움이된다면

$('#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>

.

이것 좀 봐 주셔서 감사합니다. 저는 이것에 대해 매우 새롭고 얻을 수있는 모든 도움을 사용할 수 있습니다.)

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

};

Answer 1

그냥 더하기 아이콘을 빼기 아이콘을 제거하고 추가

작동 방식 : http://fiddle.jshell.net/zcqrmn66/17/