jQuery toggleClass()方法

jQuery的toggleClass()方法用于向所选元素添加或删除一个或多个类。该方法在添加和删除一个或多个类名之间切换。它检查每个元素是否具有指定的类名。如果类名已经存在，则会删除它;如果类名缺失，则会添加它。

通过这种方式，它创建了一个切换的效果。同时，你还可以通过使用开关参数来指定只添加或只删除。

语法 :

$(selector).toggleClass(classname,function(index,currentclass),switch)

jQuery toggleClass()方法的参数

参数	描述
classname	这是一个必需的参数。它指定要添加或删除的一个或多个类名。如果你使用多个类，则用空格分隔它们。
switch	这也是一个可选参数。它是一个布尔值，指定是否添加类（true）或删除类（false）。
function (index, currentclass)	这是一个可选参数。它指定要添加或删除的一个或多个类名。

index： 它提供了元素在集合中的索引位置。
currentclass： 它提供了选定元素的当前类名。

jQuery toggleClass()方法示例1

让我们举一个例子来演示jQuery toggleClass()方法的效果。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
 $(document).ready(function(){$ ("button").click(function(){
        $("p").toggleClass("main");
    });
});
</script>
<style>
.main {
    font-size: 150%;
    color: red;
}
</style>
</head>
<body>
<button>Toggle class "main" for p elements</button>
<p>Hello! javatpoint.com</p>
<p>This is popular tutorial website.</p>
<p><b>Note:</b> Click repeatedly on the button to see the toggle effect.</p>
</body>
</html>

jQuery toggleClass()方法示例2

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>toggleClass demo</title>
  <style>
  p {
    margin: 4px;
    font-size: 16px;
    font-weight: bolder;
    cursor: pointer;
  }
  .blue {
    color: black;
  }
  .highlight {
    background: pink;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p class="blue highlight">www.javatpoint.com</p>
<p class="blue">Java Tutorial</p>
<p class="blue">SQL Tutorial</p>
<p class="blue">Android Tutorial</p>
<p class="blue">HTML Tutorial</p>
<p class="blue">etc.</p>
<script>
 $( "p" ).click(function() {$ ( this ).toggleClass( "highlight" );
});
</script>
</body>
</html>

jQuery toggleClass()方法示例3

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>toggleClass demo</title>
  <style>
  .wrap > div {
    float: left;
    width: 100px;
    margin: 1em 1em 0 0;
    padding=left: 3px;
    border: 1px solid #abc;
  }
  div.a {
    background-color: aqua;
  }
  div.b {
    background-color: burlywood;
  }
  div.c {
    background-color: cornsilk;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div class="buttons">
  <button>toggle</button>
  <button class="a">toggle a</button>
  <button class="a b">toggle a b</button>
  <button class="a b c">toggle a b c</button>
  <a href="#">Reset</a>
</div>
<div class="wrap">
  <div></div>
  <div class="b"></div>
  <div class="a b"></div>
  <div class="a c"></div>
</div>
<script>
var cls = [ "", "a", "a b", "a b c" ];
var divs =  $( "div.wrap" ).children(); var appendClass = function() { divs.append(function() { return "<div>" + ( this.className || "none" ) + "</div>"; }); }; appendClass();$ ( "button" ).on( "click", function() {
  var tc = this.className || undefined;
  divs.toggleClass( tc );
  appendClass();
});
$( "a" ).on( "click", function( event ) {
  event.preventDefault();
  divs.empty().each(function( i ) {
    this.className = cls[ i ];
  });
  appendClass();
});
</script>
</body>
</html>