¿Cómo cambio un glyphicon al hacer clic en Bootstrap 3.2?

Quiero tener una flecha apuntando a la derecha para permitir al usuario expandir la barra lateral y luego cambiar ese glyphicon para que apunte hacia la izquierda. De esa forma, apunta hacia la izquierda para que entiendan cómo ocultar la barra lateral. Luego quiero que vuelva a cambiar a su estado predeterminado.

Esto es lo que tengo actualmente:

Solo usa:

 $('#menu-toggle').click(function(){ $(this).find('i').toggleClass('glyphicon-arrow-right').toggleClass('glyphicon-arrow-left'); }); 

Ejemplo de Fiddle

Tratar

 $('#menu-toggle').on('click', function(){ var iSelector = $(this).find('i:first'); if(iSelector.hasClass('glyphicon-arrow-right')) { iSelector.removeClass('glyphicon-arrow-right') iSelector.addClass('glyphicon-arrow-left') } }); 

Violín

Referencia:

  • selectores
  • en
  • hasClass
  • eliminarClase
  • addClass