Problema con Menú, hover y click.

[chuekeron]

Iniciado por AlejandroGalvez

Esto es algo que puedes hacer fácilmente con CSS utilizando la propiedad transition para darle suavidad al efecto. Siempre es preferible utilizar CSS que jQuery. Una vez dicho esto, la posible solución a tu click es utilizar removeClass en primer lugar y luego el addClass:

Código Javascript:

$('#menu li').click( function() {
    $('#menu li').removeClass("activo"); 
    $(this).addClass("activo"); 
});
 

Más o menos esa es la idea, aunque sin ver tu código referente al evento click y el css para encender los botones poco más puedo corregirte. Nos has mostrado el código que en principio no interesa para resolver tu problema =P.

Entiendo lo que decis, pero la verdad es que vengo manejando todos los eventos con jQuery y me gustaría seguir así.

Con respecto a los estilos, lo que hago es darle las propiedades css al elemento que le asigno la clase mediante jQquery:

Código CSS:

#menu li span {
    background-color: #0DA3FD;
    height: 25px;
    width: 0px;
}
 
#menu li a{
    color: #0DA3FD;
}
 
#menu .activo span {
    width: 100%;
}
 
#menu .activo a {
    color: #FFFFFF;
}
 

Y el javascript:

Código Javascript:

$('#menu li').not(".activo").hover(function() {
        $('a',this).css("color","#FFF"); 
        $('span',this).animate({width: "190px"}, 300); 
    }, function() {
    $('a',this).css("color","#4D545E");
        $('span',this).animate({width: "0px"}, 250); 
    });
        
    $('#menu li').click(function() {
        $('#menu li').removeClass("activo"); 
        $(this).addClass("activo"); 
    });
 

Así no funcionan los estilos que le asigno a la clase "activo" para q el botón quede pulsado. Y si hago lo siguiente:

Código Javascript:

$('#menu li').hover(function() {
        $('a',this).not(".activo a").css("color","#FFF"); 
        $('span',this).not(".activo span").animate({width: "190px"}, 300); 
    }, function() {
    $('a',this).not(".activo a").css("color","#4D545E");
        $('span',this).not(".activo span").animate({width: "0px"}, 250); 
    });
    
    $('#menu li').click(function() {
        $('#menu li').removeClass("activo"); 
        $(this).addClass("activo"); 
    });
 

...van quedando todos los botones pulsados : (