切换导航图标返回

Question

我正在构建下拉导航菜单，并尝试使用在单击菜单项时来回切换的图标。 I have been able to get it to the point where the icon will toggle, but the trouble I am having is that when another next menu option is selected, I cannot get the previous icon to toggle back.

因此，例如，当单击第一个选项时，加号变为减号，这很棒。但是当我点击第二个选项时，我似乎无法弄清楚如何让第一个选项返回到加号。

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

});

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

切换导航图标返回

Toggling Navigation Icon Back

html

javascript

navigation

font-awesome

drop-down-menu