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
    
    
  
    
  
  
    
        .divID {
            width: 360px;
            height: 140px;
            position: relative;
            background: green;
            border: 1px solid black;
        }
          
        .height {
            height: 10px;
        }
          
        #btnId {
            padding: .6em 1em;
            text-decoration: none;
        }
          
        #container {
            position: relative;
            width: 250px;
            padding: 1em;
            letter-spacing: 0;
            font-size: 1.0em;
            color: white;
        }
          
        .newToggleClass {
            text-indent: 30px;
            letter-spacing: .5em;
            width: 360px;
            height: 90px;
            padding: 10px;
            margin: 10px;
            font-size: 1.0em;
        }
    
  
    
        $(function() {
            $("#btnId").on("click", function() {
                $("#container").toggleClass("newToggleClass", 3000);
            });
        });
    

  

    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.
        
    
     
    
    
      Toggle Effect
  

  

输出：

示例 2：下面的示例演示了toggleClass()方法，通过按钮单击事件向paraId元素添加和删除多个类，即“font-styles”、“padding”和“border”。

  

    
    
  
    jQuery UI toggleClass
    
    
  
    
  
    
        .font-styles {
            background: red;
            font-size: 2em;
            width: 350px;
        }
          
        .padding {
            padding: 1em;
        }
          
        .border {
            border: 1px solid black;
            border-radius: 25px;
        }
          
        #paraId {
            width: 350px;
            height: 150px;
        }
    
  
    
        $(document).ready(function() {
            $('.btnClass').click(function() {
                $("#paraId").toggleClass(
                  "font-styles padding border", 2500);
            });
        });
    

  

    GeeksforGeeks
    jQuery UI toggleClass method 
     
    
    Toggling GFG website 
    Click this

  

输出：