本章将讨论 toggleClass()方法，它是一个有用的新操作类. toggleClass()方法从匹配元素集合中的每个元素添加或删除一个或多个类.
toggleClass()方法的基本语法如下 :
.toggleClass( className [, switch ] [, duration ] [, easing ] [, complete ] )
| Sr.No. | 参数&描述 |
|---|---|
| 1 | className 这是一个String，表示要添加的CSS类名或以空格分隔的类名列表，删除或切换. |
| 2 | switch 这是布尔类型，如果指定，则强制 toggleClass()方法，如果 true 则添加类，或者如果 false 则删除类. |
| 3 | duration 这是Number或String类型，可选择提供 slow，normal，fast，或效果持续时间之一(以毫秒为单位) .如果省略，则animate()方法确定默认值.它的默认值是 400 . |
| 4 | easing 缓动函数的名称为被传递给animate()方法. |
| 5 | complete 这是一个为每个元素调用的回调方法该元素的效果已完成. |
对于版本1.9，此方法现在支持 children 选项，该选项还将为后代元素设置动画.
.toggleClass( className [, switch ] [, options ] )
| Sr.No. | 参数&描述 |
|---|---|
| 1 | className 这是一个String，表示要添加的CSS类名或以空格分隔的类名列表，删除或切换. |
| 2 | switch 这是布尔类型，如果指定，则强制 toggleClass()方法，如果 true 则添加类，或者如果 false 则删除类. |
| 3 | 选项 这表示所有动画设置.所有属性都是可选的.可能的值为 :
|
以下示例演示了如何使用 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的标准浏览器中打开它，你还必须看到以下输出.现在，您可以使用结果
单击 Toggle 按钮，查看如何更改文本的CSS类.
