如何透過點擊 jQuery 按鈕來切換 CSS 狀態？

透過jQuery 按鈕點擊切換CSS 狀態

建立互動式Web 應用程式時，通常需要根據使用者輸入在不同的CSS 狀態之間切換。在這種情況下，您希望在單擊按鈕時顯示選單並更改其外觀。

解決方案：

提供的程式碼使用切換方法來顯示或隱藏當按一下ID 為「user_button」的按鈕時，ID 為「user_options」的選單。但是，它缺乏切換 CSS 屬性的能力。

要解決這個問題，您可以使用帶有回呼函數的切換方法或利用 jQuery 的 addClass 和 removeClass 方法。

使用使用回調函數切換（jQuery

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

此程式碼定義了兩個回呼函數：一個用於首次點擊按鈕時（滑動效果），另一個用於再次單擊按鈕時（返回原始狀態）。

或者，使用類別：

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

這裡，您不是直接更改CSS 屬性，而是添加和刪除CSS 類別("在本例中為“ active”）來切換所需的樣式。這種方法更加靈活，並且避免使用硬編碼的CSS值。

以上是如何透過點擊 jQuery 按鈕來切換 CSS 狀態？的詳細內容。更多資訊請關注PHP中文網其他相關文章！