JqueryUI - 切换类

本章将讨论toggleClass()方法，这是一个有用的新操作类。toggleClass()方法向匹配元素集中的每个元素添加或删除一个或多个类。

句法

jQueryUI 1.0 版本中添加

toggleClass ()方法的基本语法如下 -

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

先生。	参数及说明
1	班级名称这是一个字符串，表示要添加、删除或切换的 CSS 类名称或以空格分隔的类名称列表。
2	转变它的类型为 Boolean，如果指定，则强制toggleClass()方法在true时添加该类，或者在false时删除该类。
3	期间这是数字或字符串类型，并且可以选择提供慢速、正常、快速或效果持续时间（以毫秒为单位）之一。如果省略，animate() 方法将确定默认值。它的默认值为400。
4	缓和要传递给 animate() 方法的缓动函数的名称。
5	完全的这是当该元素的效果完成时为每个元素调用的回调方法。

在 jQueryUI 1.9 版本中添加

在 1.9 版本中，此方法现在支持子选项，该选项还将为后代元素设置动画。

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

先生。

参数及说明

班级名称

这是一个字符串，表示要添加、删除或切换的 CSS 类名称或以空格分隔的类名称列表。

转变

它的类型为 Boolean，如果指定，则强制toggleClass()方法在true时添加该类，或者在false时删除该类。

选项

这代表所有动画设置。所有属性都是可选的。可能的值为 -

持续时间- 确定动画运行时间的字符串或数字。其默认值为400。
easing - 指示用于过渡的缓动函数的字符串。它的默认值是swing。可能的值在这里。
Complete - 这是当该元素的效果完成时为每个元素调用的回调方法。
Children - 这是一个布尔值，表示动画是否应另外应用于匹配元素的所有后代。
队列- 这是字符串/布尔类型，指示是否将动画放入效果队列中。

例子

以下示例演示了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 类如何更改。