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

任何人都可以帮忙吗？

Answer 1

 $('#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"); }); 

Answer 2

我会使用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; }) 

Answer 3

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

Answer 4

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

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