📜  jQuery UI |切换类方法

📅  最后修改于: 2021-11-24 05:02:53             🧑  作者: Mango

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

       

输出: