Question

我正在构建一个下拉导航菜单，并尝试使用在单击菜单项时来回切换的图标。我已经能够达到图标将切换的程度，但我遇到的麻烦是，当选择了另一个下一个菜单选项时，我无法将之前的图标切换回来。

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

＆＃13;

$('#category-tabs li a').click(function() {
  $(this).find('i').toggleClass('fa-plus-circle fa-minus-circle');
});

＆＃13;

<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>

＆＃13;

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/

切换导航图标返回

1 个答案: