トグルメニューのクリックでコードを修正し、グリフコンを変更するにはどうすればいいですか？

Question

ボタンを作ったのですが、その目的は画面が小さいときにメニューを切り替えることです。アイコンハンバーガーをトグルするためにアイコンをクリックすると、メニューハンバーガーの代わりにXが表示され、逆も同様です。この問題は、アイコンを複数回連続してクリックしたときに表示されます。アイコンが表示されないことがわかります。私は、画面が小さくても、メニューアイコンを表示しています（これは正しい）。そして、それをクリックすると、アイコンがXに変わるだけでなく、他のオプションも展開されるはずです。アイコンがアイコンの前に出ないようにします。私は自分の問題がjQueryにあるように感じますが、それが何であるか、どうすればこれらの2つの作業を同時に行うことができるのか分かりません。私はブートストラップnavbarにこのトグルボタンを持っていますありがとう！

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

とその私のボタンの下

<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

これは少し長いですが、より一貫している必要があります：

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

は編集：また

、このフィドルを見ます代わりの方法（グリフィンよりFontAwesome）：http://jsfiddle.net/arunpjohny/t763P/