JqueryUI - 切换类

JqueryUI Toggle类 - 从基本到高级概念的简单简单步骤学习JqueryUI，其中包括概述，环境设置，交互，可拖动，可放置，可调整大小，可选，可排序，小部件，手风琴，自动完成，按钮，Datepicker，对话框，菜单，Progressbar，Slider，Spinner，Tabs，Tooltip，Effects，Add Class，Color Animation，Effect，Hide，Remove Class，Show，Switch Class，Toggle，Toggle Class，Utilities，Position，Widget Factory

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

语法

在jQueryUI 1.0版中添加

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 这是一个为每个元素调用的回调方法该元素的效果已完成.

在jQueryUI 1.9版中添加

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

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

Sr.No.

参数&描述

className

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

switch

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

选项

这表示所有动画设置.所有属性都是可选的.可能的值为 :

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

示例

以下示例演示了如何使用 toggleClass()方法.

               jQuery UI Switch Class Example                                                                Toggle        Welcome to Tutorials Point

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

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