时间戳

首页 > 解决方案 > 单击时将 Font Awesome 图标重置为原始图标

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

问题描述

正如您在演示中看到的那样，最初，我只看到向下箭头（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'); 
});

标签： jquery

解决方案

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

推荐阅读