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

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

1 个答案: