jQuery alternar CSS?

Question

Quiero alternar entre CSS para que cuando un usuario haga clic en el botón (#user_button) se muestre el menú (#user_options) y cambie el CSS, y cuando el usuario vuelva a hacer clic vuelva a la normalidad. Hasta ahora esto es todo lo que tengo:

$('#user_button').click(function() { 
    $('#user_options').toggle(); 
    $("#user_button").css({  
     borderBottomLeftRadius: '0px', 
     borderBottomRightRadius: '0px' 
    }); 
    return false; 
}); 

¿Alguien puede ayudar?

Answer 1

$('#user_button').toggle(function() { 
    $("#user_button").css({borderBottomLeftRadius: "0px"}); 
}, function() { 
    $("#user_button").css({borderBottomLeftRadius: "5px"}); 
}); 

el uso de clases en este caso sería mejor que el ajuste de la CSS directamente sin embargo, mirar a los métodos addClass y removeClass alecwh mencionados.

$('#user_button').toggle(function() { 
    $("#user_button").addClass("active"); 
}, function() { 
    $("#user_button").removeClass("active"); 
}); 

Answer 2

Es posible que desee utilizar los comandos jQuery .addClass y .removeClass, y cree dos clases diferentes para los estados. Esto, para mí, sería la mejor forma de hacerlo.

Answer 3

La mejor opción sería la de establecer un estilo de clase en el CSS como .showMenu y .hideMenu con los diferentes estilos dentro. A continuación, puede hacer algo como

$("#user_button").addClass("showMenu"); 

Answer 4

me gustaría utilizar la función toggleClass en jQuery y definir el CSS para la clase, por ejemplo,

/* start of css */ 
#user_button.active { 
    border-bottom-right-radius: 5px; 
    border-bottom-left-radius: 5px; 
    -webkit-border-bottom-right-radius: 5px; /* user-agent specific */ 
    -webkit-border-bottom-left-radius: 5px; 
    -moz-border-radius-bottomright: 5px; 
    -moz-border-radius-bottomleft: 5px; /* etc... */ 
} 
/* start of js */ 
$('#user_button').click(function() { 
    $('#user_options').toggle(); 
    $(this).toggleClass('active'); 
    return false; 
})