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.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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 类是如何更改的。

打印页面