定義和用法
toggle() 方法切換元素的可見狀態。
如果被選元素可見，則隱藏這些元素，如果被選元素隱藏，則顯示這些元素。
語法
$(selector).toggle(speed,callback,switch)
參數：
speed
可選。規定元素從可見到隱藏的速度（或者相反）。默認為 "0"。
可能的值：
毫秒 （比如 1500）
"slow"
"normal"
"fast"
在設置速度的情況下，元素從可見到隱藏的過程中，會逐漸地改變其高度、寬度、外邊距、內邊距和透明度。
如果設置此參數，則無法使用 switch 參數。
callback
可選。toggle 函數執行完之後，要執行的函數。
如需學習更多有關 callback 的內容，請訪問我們的 jQuery Callback(http:///a/bjac/5uxhekpa.htm) 這一章。
除非設置了 speed 參數，否則不能設置該參數。
switch
可選。布爾值。規定 toggle 是否隱藏或顯示所有被選元素。
True - 顯示所有元素
False - 隱藏所有元素
如果設置此參數，則無法使用 speed 和 callback 參數。
提示和注釋
注釋：該效果適用於通過 jQuery 隱藏的元素，或在 CSS 中聲明 display:none 的元素（但不適用於 visibility:hidden 的元素）。
示例一：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>toggle 例子-</title>
<script type="text/javascript" src="http:///keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
</head>
<body>
<div><a href="http:///a/bjac/90b914o0.htm" target="_blank">原文</a> <a href="http:///keleyi/phtml/jquery/14.htm" target="_blank">1</a> <a href="http:///keleyi/phtml/jquery/14a.htm" target="_blank">2</a> <a href="http:///keleyi/phtml/jquery/14b.htm" target="_blank">3</a></div>
<button>Toggle</button>
<p>你好！</p>
<p style="display: none">再見</p>
<script type="text/javascript">
$("button").click(function () {
$("p").toggle();
});
</script>
</body>
</html>
效果體驗：http:///keleyi/phtml/jquery/14.htm
示例2：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>toggle 例子2-</title>
<style>
p { background:#dad;
font-weight:bold;
font-size:16px; }
</style>
<script type="text/javascript" src="http:///keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
</head>
<body>
<div><a href="http:///a/bjac/90b914o0.htm" target="_blank">原文</a> <a href="http:///keleyi/phtml/jquery/14.htm" target="_blank">1</a> <a href="http:///keleyi/phtml/jquery/14a.htm" target="_blank">2</a> <a href="http:///keleyi/phtml/jquery/14b.htm" target="_blank">3</a></div>
<button>Toggle 'em</button>
<p>Hiya</p>
<p>Such interesting text, eh?</p>
<script>
$("button").click(function () {
$("p").toggle("slow");
});
</script>
</body>
</html>
效果體驗：http:///keleyi/phtml/jquery/14a.htm
示例3
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>toggle demo3-</title>
<script type="text/javascript" src="http:///keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
</head>
<body>
<div><a href="http:///a/bjac/90b914o0.htm" target="_blank">原文</a> <a href="http:///keleyi/phtml/jquery/14.htm" target="_blank">1</a> <a href="http:///keleyi/phtml/jquery/14a.htm" target="_blank">2</a> <a href="http:///keleyi/phtml/jquery/14b.htm" target="_blank">3</a></div>
<button>Toggle</button>
<p>你好</p>
<p style="display: none">再見</p>
<script>
var flip = 0;
$("button").click(function () {
$("p").toggle(flip++ % 2 == 0);
});
</script>
</body>
</html>
效果體驗：http:///keleyi/phtml/jquery/14b.htm