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

Question

In the html, I have links to two font-awesome icons, a plus and a minus. I want the plus icon ONLY to load first. When the plus icon is clicked, it runs a function and opens a vertical navigation bar. At this stage, I would like the plus icon to change to the minus. Then, when the minus icon is clicked, the bar closes and the icon will change back to the plus.

This is the 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>

And this is the 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

You don't need to have two links and two icons, just change the icon (note I've added a neutral class, toggler ):

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

Then toggle the two classes, and they'll alternate (see *** comments):

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

Example:

 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> 

---

Side note: That function can be a lot simpler and doesn't need the clicked variable:

$('.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");
});

(Of course, you can keep clicked if you want it for something else...)

Example:

 $('.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>