jQuery alternar CSS?

Quiero alternar entre CSS así que cuando un usuario hace clic en el botón ( #user_button ) muestra el menú ( #user_options ) y cambia el CSS, y cuando el usuario vuelve a hacer clic vuelve 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?

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

Sin embargo, usar clases en este caso sería mejor que establecer el CSS directamente, observe los métodos addClass y removeClass que se mencionan a continuación.

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

Yo usaría la función toggleClass en jQuery y definiría el CSS para la clase, por ej.

 /* 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; }) 

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

La mejor opción sería establecer un estilo de clase en CSS como .showMenu y .hideMenu con los diversos estilos en el interior. Entonces puedes hacer algo como

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