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

$('#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的.addClass和.removeClass命令，并为这些状态创建两个不同的类。对我而言，这将是最好的做法。

Answer 3

最好的办法是设置在CSS类样式像.showMenu和.hideMenu与各种风格的内部。然后你可以做类似于

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

Answer 4

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