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