jQuery切换CSS?

我想要在CSS之间切换,所以当用户点击button( #user_button )时,它会显示菜单( #user_options )并更改CSS,当用户再次单击它时,它将恢复正常。 到目前为止,这是我所拥有的:

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

任何人都可以帮忙吗?

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

在这种情况下使用类比直接设置css更好,请看alecwh提到的addClass和removeClass方法。

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

我会使用jQuery中的toggleClass函数,并定义CSS的类,例如

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

您可能想要使用jQuery的.addClass和.removeClass命令,并为这些状态创build两个不同的类。 对我来说,这将是最好的做法。

最好的select是在CSS中设置一个类样式,如.showMenu.hideMenu ,里面有各种样式。 那么你可以做一些类似的事情

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