jQuery切换CSS？
jQuery切换CSS？
提问于 2010-07-27 02:06:54
我想要在CSS之间切换，这样当用户单击按钮(#user_button)时，它会显示菜单(#user_options)并更改CSS，当用户再次单击它时，它会恢复正常。到目前为止，我只有以下内容：
$('#user_button').click( function() {
$('#user_options').toggle();
$("#user_button").css({
borderBottomLeftRadius: '0px',
borderBottomRightRadius: '0px'
});
return false;
});有人能帮上忙吗？
回答 5
Stack Overflow用户
回答已采纳
发布于 2010-07-27 02:10:13
对于1.9以下的jQuery版本(请参阅https://api.jquery.com/toggle-event)：
$('#user_button').toggle(function () {
$("#user_button").css({borderBottomLeftRadius: "0px"});
}, function () {
$("#user_button").css({borderBottomLeftRadius: "5px"});
});不过，在这种情况下使用类要比直接设置css要好，看看前面提到的addClass和removeClass方法。
$('#user_button').toggle(function () {
$("#user_button").addClass("active");
}, function () {
$("#user_button").removeClass("active");
});Stack Overflow用户
发布于 2010-07-27 02:33:15
我将使用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;
})Stack Overflow用户
发布于 2010-07-27 02:09:47
您可能希望使用jQuery的.addClass和.removeClass命令，并为状态创建两个不同的类。对我来说，这将是最好的实践方式。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3337621
复制相关文章
相似问题