jQuery中顯示與隱藏切換toggle方法
show與hide是一對互斥的方法。需要對元素進行顯示隱藏的互斥切換，通常情況是需要先判斷元素的display狀態，然后調用其對應的處理方法。比如顯示的元素，那么就要調用hide，反之亦然。 對於這樣的操作行為，jQuery提供了一個便捷方法toggle用於切換顯示或隱藏匹配元素
基本的操作：toggle();
這是最基本的操作，處理元素顯示或者隱藏，因為不帶參數，所以沒有動畫。通過改變CSS的display屬性，匹配的元素將被立即顯示或隱藏，沒有動畫。
- 如果元素是最初顯示，它會被隱藏
- 如果隱藏的，它會顯示出來
display屬性將被儲存並且需要的時候可以恢復。如果一個元素的display值為inline，然后是隱藏和顯示，這個元素將再次顯示inline
提供參數：.toggle( [duration ] [, complete ] )
同樣的提供了時間、還有動畫結束的回調。在參數對應的時間內，元素會發生顯示/隱藏的改變，在改變的過程中會把元素的高、寬、不透明度進行一系列動畫效果。這個元素其實就是show與hide的方法
直接定位：.toggle(display)
直接提供一個參數，指定要改變的元素的最終效果
其實就是確定是使用show還是hide方法
if ( display === true ) {
$( "elem" ).show();
} else if ( display === false ) {
$( "elem" ).hide();
}
toggle方法就是show與hide的相互切換的一個快捷方法，具體使用可以參考右邊的案例：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
div {
width: 500px;
height: 50px;
padding: 5px;
margin: 5px;
float: left;
border: 1px solid #ccc;
}
.left {
background: #bbffaa;
}
.right {
background: yellow;
display: none;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>通過toggle切換顯示與隱藏</h2>
<div class="left">顯示到隱藏</div>
<div class="left">顯示到隱藏</div>
<div class="right">隱藏到顯示</div>
<button>直接show-hide動畫</button>
<button>直接hide-show動畫</button>
<script type="text/javascript">
$("button:first").click(function() {
$(".left").toggle(3000)
});
</script>
<script type="text/javascript">
$("button:last").click(function() {
$(".right").toggle(3000)
});
</script>
</body>
</html>