JqueryUI - 切換類

本章將討論toggleClass()方法，這是一種用於操作的有用新類。toggleClass()方法向匹配元素集中每個元素新增或刪除一個或多個類。

語法

在 jQueryUI 1.0 版中新增

toggleClass()方法的基本語法如下所示：

.toggleClass( className [, switch ] [, duration ] [, easing ] [, complete ] )

序號	引數及說明
1	className 這是一個字串，表示要新增、刪除或切換的 CSS 類名，或用空格分隔的類名列表。
2	switch 此引數為布林型別，如果指定，則強制toggleClass()方法在true時新增類，或在false時刪除類。
3	duration 此引數為數字或字串型別，可選地提供slow、normal、fast之一，或效果持續時間（以毫秒為單位）。如果省略，則animate()方法確定預設值。其預設值為400。
4	easing 要傳遞給animate()方法的緩動函式的名稱。
5	complete 此引數為回撥方法，當此元素的效果完成時，將為每個元素呼叫。

在 jQueryUI 1.9 版中新增

在 1.9 版中，此方法現在支援children選項，該選項還將為後代元素設定動畫。

.toggleClass( className [, switch ] [, options ] )

序號

引數及說明

className

這是一個字串，表示要新增、刪除或切換的 CSS 類名，或用空格分隔的類名列表。

switch

此引數為布林型別，如果指定，則強制toggleClass()方法在true時新增類，或在false時刪除類。

options

這表示所有動畫設定。所有屬性都是可選的。可能的值為：

duration - 一個字串或數字，確定動畫執行的時長。其預設值為400。
easing - 一個字串，指示要用於過渡的哪個緩動函式。其預設值為swing。可能的值在此處。
complete - 此引數為回撥方法，當此元素的效果完成時，將為每個元素呼叫。
children - 此引數為布林型別，表示是否還應將動畫應用於匹配元素的所有後代。
queue - 此引數為字串/布林型別，指示是否將動畫放入效果佇列中。

示例

以下示例演示了toggleClass()方法的使用。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Switch Class Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .class1 {
            border-width : 10px;
            border-color : grey;
            background-color : #cedc98;
            color : black;
         }
      </style>
      
      <script>
         function toggle () {
            $("#para").toggleClass ("class1", 1000);
         }
      </script>
   </head>
   
   <body>
      <button onclick = toggle()> Toggle </button>
      <p id = "para" style = border-style:solid> Welcome to Tutorials Point </p>
   </body>
</html>

讓我們將上述程式碼儲存在一個 HTML 檔案toggleclassexample.htm中，並在支援 javascript 的標準瀏覽器中開啟它，您還應該看到以下輸出。現在，您可以使用結果：

單擊切換按鈕以檢視文字的 CSS 類是如何更改的。

列印頁面