单击事件后更改字体真棒图标

Question

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

这是js：

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

  });

})

Answer 1

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

<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"); // ***
});

例：

 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"); // *** }); 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <nav> <a href="#"><i class="fa toggler fa-plus-circle" style="font-size:20px;"></i></a> </nav> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

---

旁注：该函数可以简单得多，不需要clicked变量：

$('.toggler').click(function() {
    var $this = $(this);
    var toggled = $this.hasClass("fa-minus-circle");
    $('div.vertical-nav').animate({
        'right': toggled ? -250 : 0
    });
    $this.toggleClass("fa-plus-circle fa-minus-circle");
});

（当然，如果您需要其他功能，可以继续clicked ...）

例：

 $('.toggler').click(function() { var $this = $(this); var toggled = $this.hasClass("fa-minus-circle"); $('div.vertical-nav').animate({ 'right': toggled ? -250 : 0 }); $this.toggleClass("fa-plus-circle fa-minus-circle"); }); 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <nav> <a href="#"><i class="fa toggler fa-plus-circle" style="font-size:20px;"></i></a> </nav> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>