ナビゲーションアイコンの切り替え戻る

Question

私はドロップダウンナビゲーションメニューを構築しており、メニュー項目をクリックすると前後に切り替えるアイコンを使用しようとしています。私はアイコンが切り替わる点までそれを得ることができましたが、私が抱えている問題は、次のメニューオプションが選択されたときに前のアイコンを戻すことができないということです。

たとえば、最初のオプションをクリックすると、プラス記号がマイナスに変わります。これは素晴らしいものです。しかし、私が第2の選択肢をクリックすると、最初の選択肢をどのようにプラスに戻すかを理解できないようです。

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