jQuery中toggle()方法、toggleClass()方法
阿新 • • 發佈：2019-02-11
定義和用法
toggle() 方法用於繫結兩個或多個事件處理器函式，以響應被選元素的輪流的 click 事件。
該方法也可用於切換被選元素的 hide() 與 show()
向 Toggle 事件繫結兩個或更多函式
當指定元素被點選時，在兩個或多個函式之間輪流切換。
如果規定了兩個以上的函式，則 toggle() 方法將切換所有函式。例如，如果存在三個函式，則第一次點選將呼叫第一個函式，第二次點選呼叫第二個函式，第三次點選呼叫第三個函式。第四次點選再次呼叫第一個函式，以此類推。
語法
$(selector).toggle(function1(),function2(),functionN(),...)
| 引數 | 描述 |
|---|---|
| function1() | 必需。規定當元素在每偶數次被點選時要執行的函式。 |
| function2() | 規定當元素在每奇數次被點選時要執行的函式。 |
| functionN(),... | 規定需要切換的其他函式。 |
例項：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" 切換 Hide() 和 Show()
檢查每個元素是否可見。
如果元素已隱藏，則執行 show()。如果元素可見，則元素 hide()。這樣就可以創造切換效果。
語法
$(selector).toggle(speed,callback)
| 引數 | 描述 |
|---|---|
| speed | 可選。規定 hide/show 效果的速度。預設是 "0"。可能的值 ： 毫秒（比如 1500） "slow" "normal" "fast" |
| callback | 可選。當 toggle() 方法完成時執行的函式。 |
例項：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>toggle方法切換 Hide() 和 Show()</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">請點選這裡，顯示和隱藏上面的段落p</button>
</body>
</html>
顯示或隱藏元素
規定是否只顯示或只隱藏所有匹配的元素。
語法
$(selector).toggle(switch)
| 引數 | 描述 |
|---|---|
| switch | 必需。布林值，規定 toggle() 是否應只顯示或只隱藏所有被選元素。true - 顯示元素 false - 隱藏元素 |
例項：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>顯示或隱藏元素</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$("p").toggle(true);
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p style="display:none">This is another paragraph.</p>
<p>把 switch 引數設定為 false，可以隱藏所有段落。</p>
<button class="btn1">點選這裡，只顯示所有 p 元素</button>
</body>
</html>
toggleClass()方法
定義和用法
toggleClass() 對設定或移除被選元素的一個或多個類進行切換。
該方法檢查每個元素中指定的類。如果不存在則新增類，如果已設定則刪除之。這就是所謂的切換效果。
不過，通過使用 "switch" 引數，您能夠規定只刪除或只新增類。
語法
$(selector).toggleClass(class,switch)
| 引數 | 描述 |
|---|---|
| class | 必需。規定新增或移除 class 的指定元素。如需規定若干 class，請使用空格來分隔類名。 |
| switch | 可選。布林值。規定是否新增(true)或移除(false) class。 |
例項：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>toggleClass()新增和刪除類</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").toggleClass("main");
});
});
</script>
<style type="text/css">
.main
{
font-size:120%;
color:red;
}
</style>
</head>
<body>
<h1 id="h1">This is a heading</h1>
<p class="main">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">切換段落的 "main" 類</button>
</body>
</html>
使用函式來切換類
語法
$(selector).toggleClass(function(index,class),switch)
| 引數 | 描述 |
|---|---|
| function(index,class) | 必需。規定返回需要新增或刪除的一個或多個類名的函式。 index - 可選。接受選擇器的 index 位置。class - 可選。接受選擇器的當前的類。 |
| switch | 可選。布林值。規定是否新增(true)或移除(false)類。 |
例項:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>使用函式來切換類</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$('ul li').toggleClass(function(){
return 'listitem_' + $(this).index();
});
});
});
</script>
<style type="text/css">
.listitem_1, .listitem_3
{
color:red;
}
.listitem_0, .listitem_2
{
color:blue;
}
</style>
</head>
<body>
<h1 id="h1">This is a heading</h1>
<ul>
<li>Apple</li>
<li>IBM</li>
<li>Microsoft</li>
<li>Google</li>
</ul>
<button class="btn1">新增或移除列表項的類</button>
</body>
</html>