快捷導(dǎo)航

jQuery中toggleClass()方法用法實(shí)例

更新時(shí)間：2015年01月05日 11:54:04 投稿：shichen2014

這篇文章主要介紹了jQuery中toggleClass()方法用法,實(shí)例分析了toggleClass()方法的功能、定義及對(duì)添加或移除匹配元素的一個(gè)或多個(gè)類(lèi)進(jìn)行切換的使用技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery中toggleClass()方法用法。分享給大家供大家參考。具體分析如下：

此方法對(duì)添加或移除匹配元素的一個(gè)或多個(gè)類(lèi)進(jìn)行切換。
toggleClass()方法檢查匹配元素中指定的類(lèi)。如果不存在則添加類(lèi)，如果已設(shè)置則刪除之。這就是所謂的切換效果。

語(yǔ)法結(jié)構(gòu)一:

復(fù)制代碼代碼如下:

$(selector).toggleClass(class,switch)

如果存在（不存在）就刪除（添加）一個(gè)類(lèi)。

參數(shù)列表:

參數(shù)	描述
class	規(guī)定添加或刪除的類(lèi)。如果需要添加多個(gè)類(lèi)，使用空格間隔。
switch	可選。布爾值，為true則加上對(duì)應(yīng)的class，否則就刪除。

實(shí)例代碼:

復(fù)制代碼代碼如下:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://m.fzitv.net/" />

<title>腳本之家</title>

<style type="text/css">

.content{display:none;}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript"> 

$(document).ready(function(){ 

  $("button").click(function(){ 

    $("div").toggleClass("content"); 

  }) 

})  

</script>

</head>

<body>

<button>添加更多內(nèi)容</button>

<div class="content"><textarea cols="40" rows="5" name="textarea"></textarea></div>

</body>

</html>

語(yǔ)法結(jié)構(gòu)二:

復(fù)制代碼代碼如下:

$(selector).toggleClass(function(index,class),switch)

把函數(shù)的返回值作為切換的類(lèi)。

參數(shù)列表:

參數(shù)	描述
function(index,class)	函數(shù)定義返回需要添加或刪除的一個(gè)或多個(gè)類(lèi)名。 index - 可選，接受選擇器的索引位置。 class - 可選，接受選擇器的當(dāng)前的類(lèi)。
switch	可選。布爾值，為true則加上對(duì)應(yīng)的class，否則就刪除。

實(shí)例代碼:

復(fù)制代碼代碼如下:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://m.fzitv.net/" />

<title>腳本之家</title>

<style type="text/css">

.content{display:none;}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript"> 

$(document).ready(function(){ 

  $("button").click(function(){ 

    $("div").toggleClass(function(){ 

      return "content" 

    }); 

  }) 

})  

</script>

</head>

<body>

<button>添加更多內(nèi)容</button>

<div class="content"><textarea cols="40" rows="5" name="textarea"></textarea></div>

</body>

</html>