Trabajo con el método toggleClass en jQuery
También existe un método útil
toggleClass,
que agregará la clase especificada si no está presente
y la eliminará si está presente.
Puede ser necesario para que, al hacer clic en el mismo
botón, ocurran cambios periódicos con un elemento de la página.
Consideremos este método con un ejemplo. Supongamos que tenemos los siguientes estilos CSS:
.red {
color: red;
}
.zzz {
font-style: italic;
}
También hay un párrafo con la clase zzz:
<p class="zzz" id="test">texto</p>
<button>hacer clic</button>
Hagamos, por ejemplo, que en el primer clic
del botón, se agregue la clase red al elemento,
que agrega color rojo, y en el siguiente clic, esta clase
se elimine y desaparezca el color rojo. Si
se vuelve a hacer clic en el botón, todo se repetirá.
Intente ejecutar el siguiente código y compruébelo
(la clase zzz resalta el texto en
cursiva,
para mostrar que toggleClass no
interferirá con el funcionamiento de otras clases):
$('button').click(function() {
$('#test').toggleClass('red');
});
Después del primer clic, el código HTML se verá
así (se agregará la clase red):
<p class="zzz red" id="test">texto</p>
<button>hacer clic</button>
Y después del segundo clic, así (desaparecerá la clase
red):
<p class="zzz" id="test">texto</p>
<button>hacer clic</button>
Agregue a todos los li la clase www, si
no está presente, y elimínela si está presente.
