[ jquery 方法 toggleClass(class|fn[,sw]) ] 此方法如果存在（不存在）就删除（添加）一个类

Posted 2020-07-28 窗棂博客记录

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[ jquery 方法 toggleClass(class|fn[,sw]) ] 此方法如果存在（不存在）就删除（添加）一个类相关的知识，希望对你有一定的参考价值。

用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数:

如果第二个参数是callback,那么需要返回的是类名,函数传参解释如下:

　　1:接收元素的索引位置和元素旧的样式类作为参数

　　2: 一个用来判断样式类添加还是移除的 boolean 值

　　3.用于决定元素是否包含class的布尔值(sw[switch])

实例:

<!DOCTYPE html>
<html lang=‘zh-cn‘>
<head>
<title>Insert you title</title>
<meta http-equiv=‘description‘ content=‘this is my page‘>
<meta http-equiv=‘keywords‘ content=‘keyword1,keyword2,keyword3‘>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- <script type=‘text/javascript‘ src=‘./js/jquery-3.0.0.js‘></script> -->
<script type=‘text/javascript‘ src=‘./js/jquery-1.12.1.min.js‘></script>
<style type=‘text/css‘>
   input{font:400 13px/20px ‘Courier New‘;color:#000;}
   .addOne{padding:0 8px;}
   .addTwo{color:#999;}
   button[type=‘button‘]{font:400 13px/1.2em ‘Courier New‘;padding:3px;}
</style>
<script type=‘text/javascript‘>
    $(function(){
        $(‘button‘).click(function(){
           $(‘#user‘).toggleClass(function(index,oldClass){
               return ‘addTwo‘;
            });
        });
    });
</script>
</head>
<body>
   <input type=‘text‘ id=‘user‘ required="required" value=‘user‘ class=‘addOne addTwo‘/>
   <button type=‘button‘>toggleClass</button>
</body>
</html>

以上是关于[ jquery 方法 toggleClass(class|fn[,sw]) ] 此方法如果存在（不存在）就删除（添加）一个类的主要内容，如果未能解决你的问题，请参考以下文章

jQuery toggleClass() 方法

jQuery addClass removeClass toggleClass方法概述

jQuery属性操作之toggleClass()和hasClass()方法的比较

jQuery：单击外部元素以“关闭”使用toggleClass出现的菜单

207 jQuery 样式操作：css ()，addClass，removeClass，toggleClass，tab 栏切换案例