單擊按鈕時如何使用 jQuery 切換 CSS 樣式？

jQuery Toggle CSS

此問題需要一個JavaScript 切換器，當使用者點擊按鈕時，它可以在兩種CSS 樣式之間切換。第一次按一下應顯示選單並調整 CSS，而第二次點擊應恢復到原始狀態。提供的程式碼不考慮CSS切換，因此需要一個解決方案。

一個解決方案涉及使用toggle()事件，特別是針對1.9以下的jQuery版本。它的工作原理如下：

$('#user_button').toggle(function () {
    $("#user_button").css({borderBottomLeftRadius: "0px"});
}, function () {
    $("#user_button").css({borderBottomLeftRadius: "5px"});
});

此程式碼在第一次點擊時將「user_button」元素的邊框半徑設為0px，從而有效地顯示「user_options」選單，並在第二次單擊時將其重置為5px ，將其恢復到原始狀態。

alecwh 推薦的另一種方法是使用 CSS 類別來管理切換。這更乾淨且更易於維護。修改後的版本如下所示：

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

此程式碼在第一次點擊時將「active」類別新增至「user_button」元素，這可能會使其樣式不同，並在第二次單擊時將其刪除，將其恢復到初始狀態。

以上是單擊按鈕時如何使用 jQuery 切換 CSS 樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！