Wie kann ich meinen Code reparieren und Glyphonicon bei Klick für ein Toggle-Menü ändern

Question

Ich habe eine Taste gemacht und der Zweck ist es, ein Menü umzuschalten, wenn der Bildschirm klein ist. Ich habe alles funktioniert, wenn ich auf das Symbol klicke, um "Menü-Hamburger" zu wechseln, wird es erweitert und zeigt ein X anstelle eines Menühamburger, und umgekehrt. Das Problem tritt auf, wenn ich mehrmals hintereinander auf das Symbol klicke, von dem aus ich erkennen kann, dass der Schalter nicht mit dem Symbol übereinstimmt. Ich möchte, wenn der Bildschirm klein ist, zeigen Sie das Menü-Symbol (es tut dies richtig), und wenn ich es anklicke sollte es die anderen Optionen sowie das Symbol auf das X ändern. Also im Grunde verbinden Sie das Menü und die Icon, damit die Icons nicht überholt werden. Ich habe das Gefühl, dass mein Problem in der jQuery ist, aber ich bin mir nicht sicher, was es ist oder wie ich diese beiden gleichzeitig arbeiten lassen kann. Ich habe diese Umschalttaste an einer bootstrap navbar Vielen Dank!

jQuery(function ($) { 
    $('#togglebtt').on('click', function() { 
     $(this).find('span').toggleClass('glyphicon-menu-hamburger').toggleClass('glyphicon-remove'); 
      }); 
     }); 

und unter seinem meine Taste

<button id="togglebtt" type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle collapsed"> 
    <span class="glyphic glyphicon-menu-hamburger"></span></button> 

Answer 1

Dies ist ein wenig länger, aber sollte konsistent sein:

jQuery(function ($) { 
    $('#togglebtt').on('click', function() { 
     if ($(this).find('span').hasClass('glyphicon-menu-hamburger')) { 
     $(this).removeClass('glyphicon-menu-hamburger') 
       .addClass('glyphicon-remove'); 
     } else { 
     $(this).removeClass('glyphicon-remove') 
       .addClass('glyphicon-menu-hamburger'); 
     } 
    }); 
}); 

Edit:

Auch finden Sie in diesem Fiddle für eine alternative Methode (FontAwesome anstelle von Glyphicons): http://jsfiddle.net/arunpjohny/t763P/