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更好,看看提到的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;
})