toggle方法特別實用，很多時候在頁面中都會用到捷凄，例如：
點擊切換位置、顯示隱藏元素
其實就是無限的來回切換0和1兩種狀態(tài)围来，使用起來比if好用太多了跺涤！
例如：
點擊切換標(biāo)簽的背景顏色
//記得載入jQuery庫
<script src="js/jquery-1.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<p>點我切換</p>
<script type="text/javascript">
//先用jq給這個p標(biāo)簽設(shè)置一個初始的背景顏色和樣式
$("p").css({"background":"yellow","text-align":"center","padding":"10px"});
//創(chuàng)建一個jq變量，存儲p標(biāo)簽點擊事件
var $p = $("p").click();
$p.toggle(function(){ //方法1
$p.css("background","red");
},function(){ //方法2
$p.css("background","yellow");
})
</script>
點擊顯示隱藏分類目錄
先看看效果：
這個功能還是比較實用的监透，可以用在欄目顯示全部和隱藏部分的地方桶错。
//記得載入jQuery庫
<script src="js/jquery-1.3.1.min.js" type="text/javascript" charset="utf-8"></script>
//隨便寫的css，只是為了方便觀察
<style type="text/css">
li{float: left; margin: 10px;list-style-type: none}
.clear{clear: both;}
p{text-align: center;}
</style>
//分類目錄的html代碼
<ul id="brand">
<li>Samsung</li>
<li>iPhone</li>
<li>Sony</li>
<li>LeTV</li>
<li>360</li>
<li>LG</li>
<li>TCL</li>
<li>Huawei</li>
<li>ASUS</li>
<li>Cube</li>
<li>Tenda</li>
<li>samsung</li>
<li>Lenovo</li>
<li>OPPO</li>
<li>Meizu</li>
<li>Xiaomi</li>
<li>Other</li>
</ul>
<div class="clear"></div>
<p class="more" href="#">↓ 顯示全部</p>
<script type="text/javascript">
//選中除了前七個欄目和最后一個欄目外的其余欄目賦值給一個JQ變量（為什么是七個胀蛮？因為這是數(shù)組院刁，數(shù)組的起始值是0，所以gt(6)是大于七個以上的）
var $category =$("#brand li:gt(6):not(:last)")粪狼；
//默認(rèn)先將這些欄目隱藏
$category.hide();
//定義一個JQ變量存放控制區(qū)域點擊事件
var $more = $(".more").click();
$more.toggle(function(){
//隱藏
$category.hide();
//修改控制區(qū)文本內(nèi)容
$more.text("↓ 顯示全部");
//移除高亮的class
$("ul li").removeClass("high");
},function(){
//顯示
$category.show();
//修改控制區(qū)文本內(nèi)容
$more.text("↑ 精簡顯示");
//為欄目中重要的欄目加上高亮class
$("ul li").filter(":contains('Samsung'),:contains('Xiaomi'),:contains('LG')").addClass("high");
})
</script>
當(dāng)然退腥，這個地方還可以實用if判斷$category這個變量的顯示狀態(tài)來控制任岸，原理都差不多的。
<script type="text/javascript">
var $category =$("#brand li:gt(6):not(:last)");
$category.hide();
var $more = $(".more");
$more.click(function(){
if ($category.is(":visible")) {
$category.hide();
$more.text("↓ 顯示全部");
$("ul li").removeClass("high");
} else{
$category.show();
$more.text("↑ 精簡顯示");
$("ul li").filter(":contains('Samsung'),:contains('Xiaomi'),:contains('LG')").addClass("high");
}
return false;
})
</script>
