toggle方法特别实用，很多时候在页面中都会用到，例如：
点击切换位置、显示隐藏元素
其实就是无限的来回切换0和1两种状态，使用起来比if好用太多了！
例如：
点击切换标签的背景颜色
//记得载入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标签设置一个初始的背景颜色和样式
$("p").css({"background":"yellow","text-align":"center","padding":"10px"});
//创建一个jq变量，存储p标签点击事件
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变量（为什么是七个？因为这是数组，数组的起始值是0，所以gt(6)是大于七个以上的）
var $category =$("#brand li:gt(6):not(:last)")；
//默认先将这些栏目隐藏
$category.hide();
//定义一个JQ变量存放控制区域点击事件
var $more = $(".more").click();
$more.toggle(function(){
//隐藏
$category.hide();
//修改控制区文本内容
$more.text("↓ 显示全部");
//移除高亮的class
$("ul li").removeClass("high");
},function(){
//显示
$category.show();
//修改控制区文本内容
$more.text("↑ 精简显示");
//为栏目中重要的栏目加上高亮class
$("ul li").filter(":contains('Samsung'),:contains('Xiaomi'),:contains('LG')").addClass("high");
})
</script>
当然，这个地方还可以实用if判断$category这个变量的显示状态来控制，原理都差不多的。
<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>
