单击时将Font Awesome图标重置为原始图标

Question

如您在演示中所看到的，最初，我仅看到向下箭头（fa-angle-down）。 如果我单击其中任何一个，该图标将替换为向上箭头（fa-angle-up）。 如果我将其保留为向上箭头，然后单击另一个向下箭头，则我留下的向上箭头将替换为向下箭头。 到目前为止一切都很好。

我遇到的问题是，如果我再次单击它，如何将向上箭头图标更改（重置）为默认向下箭头，因为现在如果单击它，它将不会重置。

这是手风琴菜单的一部分，该菜单显示单击时的部分内容。 我可以使用切换按钮来更改图标，但是只有当您有1个图标时（保持现有功能），切换按钮才起作用。

这是演示http://jsfiddle.net/Adyyda/cnkzeym7/4/

这是代码

<span class="has-subnav fa fa-angle-down"></span>
<span class="has-subnav fa fa-angle-down"></span>
<span class="has-subnav fa fa-angle-down"></span>
<span class="has-subnav fa fa-angle-down"></span>

span.has-subnav {

    display: block;
    font-size: 17px;
    padding: 0 5px;
    cursor: pointer;
    color: #f00;
    background: rgba(205, 205, 205, 0.2);
    top: 1px;
    width:50px;
    height: 50px;

}

$('span.has-subnav').click(function() {
    $('span.has-subnav').removeClass('fa-angle-up').addClass('fa-angle-down'); 
    $(this).removeClass('fa-angle-down').addClass('fa-angle-up'); 
}); 

Answer 1

 var $subnavs = $('span.has-subnav').on('click', function() { var $this = $(this); //it's down, change it up if ($this.hasClass('fa-angle-down')) { //change the one clicked $this.removeClass('fa-angle-down').addClass('fa-angle-up'); //reset all the others that were clicked $subnavs.not(this).removeClass('fa-angle-up').addClass('fa-angle-down'); } else { //just reset the one clicked $this.addClass('fa-angle-down').removeClass('fa-angle-up'); } }); 

您也可以使用toggleClass（）压缩它。

 var $subnavs = $('span.has-subnav').on('click', function() { //reset the other elements $subnavs.not(this).removeClass('fa-angle-up').addClass('fa-angle-down'); //change the one clicked, toggling the classes back and forth $(this).toggleClass('fa-angle-up fa-angle-down'); });