jQuery 切换 CSS？

Question

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

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

有人可以帮忙吗？

Answer 1

对于低于 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 更好，请查看 alecwh 提到的 addClass 和 removeClass 方法。

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