Javascript 单击事件后更改字体图标

在html中，我有两个很棒的字体图标链接，一个加号和一个减号。我只想先加载加号图标。单击加号图标时，它将运行一个函数并打开一个垂直导航栏。在这个阶段，我希望加号图标变为减号。然后，单击减号图标时，该栏关闭，图标将变回加号

这是html：

 <nav>
     <a href="#"><i class="fa fa-plus-circle" style="font-size:20px;"></i></a>
     <a href="#"><i class="fa fa-minus-circle" style="font-size:20px;"></i></a>
 </nav>

---

您不需要有两个链接和两个图标，只需更改图标即可（注意，我添加了一个中性类，

toggler

）：

例如：

var=false；
$（'.toggler'）。单击（函数（）{//***
如果（单击==false）{
$（'div.vertical-nav'）。设置动画({
“右”：0
});
单击=真；
}
否则{
$（'div.vertical-nav'）。设置动画({
“对”：-250
});
单击=假；
}
$（this）.toggleClass（“fa加圆fa减圆”）；//***
});
您不需要有两个链接和两个图标，只需更改图标即可（注意，我添加了一个中性类，
切换器
）：

例如：


var=false；
$（'.toggler'）。单击（函数（）{//***
如果（单击==false）{
$（'div.vertical-nav'）。设置动画({
“右”：0
});
单击=真；
}
否则{
$（'div.vertical-nav'）。设置动画({
“对”：-250
});
单击=假；
}
$（this）.toggleClass（“fa加圆fa减圆”）；//***
});

那么您的问题是什么？问题是如何在每次单击时切换图标。我的问题已经回答了。谢谢。那么你的问题是什么？问题是如何在每次点击时切换图标。我的问题已经回答了。谢谢。哇……太快了，而且效果很好。谢谢。超级。不过，您这边的简单代码不起作用。@jbm59er：是的，它起作用了；我在答案中添加了一些实例。但是您可能需要添加
return false
，这样当浏览器跟随
#
链接时，页面不会弹回到顶部。亲爱的TD Crowder，我没有设法让它工作。这是我的全部代码（这是课堂上的一个练习）：-哇……太快了，而且工作得很好。谢谢。超级。不过，您这边的简单代码不起作用。@jbm59er：是的，它起作用了；我在答案中添加了一些实例。但是您可能需要添加
return false
，这样当浏览器跟随
#
链接时，页面不会弹回到顶部。亲爱的TD Crowder，我没有设法让它工作。这是我的全部代码（这是课堂练习）：-
var clicked = false;
$('.fa-plus-circle').click(function() {
    if (clicked == false) {
      $('div.vertical-nav').animate({
        'right': 0
      });
      clicked = true;

    } else {
      $('div.vertical-nav').animate({
        'right': -250
      });
      clicked = false;
    }

  });

})

<nav>
     <a href="#"><i class="fa toggler fa-plus-circle" style="font-size:20px;"></i></a>
</nav>

var clicked = false;
$('.toggler').click(function() { // ***
    if (clicked == false) {
        $('div.vertical-nav').animate({
            'right': 0
        });
        clicked = true;

    }
    else {
        $('div.vertical-nav').animate({
            'right': -250
        });
        clicked = false;
    }
    $(this).toggleClass("fa-plus-circle fa-minus-circle"); // ***
});