jQuery UI |切换类方法
jQuery UI 框架类和方法确实改进了 jQuery toggle()和toggleClass()方法,使其对用户和开发人员更具交互性。 jQuery UI 提供内置的toggleClass()方法,该方法通过向匹配或选定元素添加或删除 CSS 类来管理视觉切换效果。它有助于从一种 CSS 过渡状态更改为另一种保持 jQuery 代码中所有样式更改的状态。
句法:
$(selector).toggleClass(className [, switch ] [,
duration ] [, easing ] [, complete ] )
或者
$(selector).toggleClass(className [, switch ] [, options])
或者
$(selector).toggleClass([state] )
参数:它接受一个参数“className”,它是要为所选元素添加、切换或删除的类的名称。 “className”的类型是字符串 。不止一个类被空格隔开。
选项:
- 开关:类型是Boolean 。它帮助toggleClass( ) 方法根据“true”或“false”值在添加类或删除类之间切换。
- 持续时间:此选项允许您选择以毫秒为单位的视觉切换效果的持续时间。类型是number或字符串 。默认值为 400,可能的值为“fast”、“slow”、“normal”。
- 缓动:类型是字符串 。此选项提到切换效果需要什么样的缓动或进度。基本平滑过渡的默认值是“swing”。
- 完成:这是在所选元素完成切换效果时调用的回调方法。回调函数可用于处理用户验证。
返回值:它通过切换新类返回选定的元素。
示例 1:以下示例演示了脚本部分中的toggleClass()方法。它通过按钮单击事件向容器元素添加和删除“newToggleClass”类来显示切换效果。
jQuery UI toggleClass
GeeksforGeeks
jQuery UI toggleClass method
In this section we are learning jQuery UI
framework's toggleClass() method. It toggles
between adding or removing classes for selected elements.
输出:
示例 2:下面的示例演示了toggleClass()方法,通过按钮单击事件向paraId元素添加和删除多个类,即“font-styles”、“padding”和“border”。
jQuery UI toggleClass
GeeksforGeeks
jQuery UI toggleClass method
Toggling GFG website
输出: