jQuery - toggle & removeClass

Question

Una fácil, pero no puedo resolverlo. Tengo un enlace llamado #título y cuando lo haces clic en div se llama #contenido. Esto funciona perfectamente, pero además estoy agregando clase "activa" a mi enlace #título y no puedo deshacerme de ella, incluso con removeClass.

Vea el código anterior y el enlace de ejemplo (el título debe ser rojo SOLAMENTE cuando #content se expande, no todo el tiempo).

$('#title').click(function() { 
    $(this).addClass('active'); 
    $('#content').toggle(); 
}), function() { 
    $(this).removeClass('active'); 
}; 

http://jsfiddle.net/vY3WY/

Answer 1

Puede usar la función toggleClass junto con alternar.

http://jsfiddle.net/vY3WY/1/

$('#title').click(function() { 
    $(this).toggleClass('active'); 
    $('#content').toggle(); 
}); 

O puede utilizar una versión más robusta que se asegurará de que se añade a la clase si el contenido es visible y baja por otra razón.

http://jsfiddle.net/vY3WY/6/

$('#title').click(function() { 
    $('#content').toggle(); 
    if ($('#content:visible').size() != 0) 
    { 
     $(this).addClass('active'); 
    } 
    else 
    { 
     $(this).removeClass('active'); 
    } 
}); 

Answer 2

This version works.

$('#title').click(function() { 
    if($(this).hasClass('active')) { 
     $(this).removeClass('active'); 
    } else { 
     $(this).addClass('active'); 
    } 
    $('#content').toggle(); 
}); 

comprobar la presencia de 'activa' usando hasClass y quitarlo si está allí. Añádalo si no lo está.

O podría usar toggleClass para ocultar toda esa lógica.

Answer 3

Una solución compacta y siendo legible (supongo):

$('#title').click(function() { 
    var isContentVisible=$('#content').toggle().is(':visible'); 
    $(this).toggleClass('active', isContentVisible); 
}); 

Live Demo

conmuta #content y comprueba si es visible o no después. A continuación, alterna la clase en #title según el resultado. Podría ser una función de una sola línea también, pero no satisfaría mis expectativas de legibilidad en ese momento.

Answer 4

una más Solución para ocultar el valor actual con otro valor

$('.my').click(function() { 
if($(this).hasClass('active')) { 
    $(this).removeClass('active'); 
} else { 
    $(this).addClass('active'); 
} 
$('.my').toggle(); 

});

Haga clic here! Esto también funciona con reference links.

Answer 5

Creo que esta es la forma más adecuada de hacerlo.

$(this).toggleClass('active').siblings().removeClass('active');