切换类（Toggle Class）

优质

小牛编辑

123浏览

2023-12-01

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

语法 (Syntax)

在jQueryUI的1.0版中添加

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

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

Sr.No.	参数和描述
1	className 这是一个String，表示要添加，删除或切换的CSS类名称或以空格分隔的类名列表。
2	switch 这是Boolean类型，如果指定，则强制toggleClass()方法添加类，如果为true ，或者如果为false删除类。
3	duration 它的类型为Number或String，可选择提供slow, normal, fast,或效果持续时间之一（以毫秒为单位）。如果省略，则animate（）方法确定默认值。其默认值为400 。
4	easing 要传递给animate（）方法的缓动函数的名称。
5	complete 这是对此元素的效果完成时为每个元素调用的回调方法。

在jQueryUI 1.9版中添加

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

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

Sr.No.

参数和描述

className

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

switch

这是Boolean类型，如果指定，则强制toggleClass()方法添加类，如果为true ，或者如果为false删除类。

options

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

duration - 确定动画运行duration的字符串或数字。其默认值为400 。
easing - 一个字符串，指示要用于转换的缓动函数。它的默认值是swing 。可能的值在here 。
complete - 这是在为此元素完成效果时为每个元素调用的回调方法。
children - 这是一个布尔值，表示动画是否应另外应用于匹配元素的所有后代。
queue - 这是String/Boolean类型，指示是否将动画放在效果队列中。

例子 (Examples)

以下示例演示了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 xnip </p>
   </body>
</html>

让我们将上述代码保存在HTML文件toggleclassexample.htm ，并在支持javascript的标准浏览器中打开它，您还必须看到以下输出。

单击Toggle按钮以查看如何更改文本的CSS类。