8.1 显示与隐藏动画效果
显示元素：
document.getElementById("content").style.display="block"；
隐藏元素：
document.getElementById("content").style.display="none"；
8.1.1 show（）方法与hide（）方法
show()方法用于显示页面中的元素，hide()方法则隐藏页面中的元素
show()方法会动态改变当前元素的高度、宽度和不透明度，最终显示当前元素，此时元素的css属性display恢复为除none之外的初始值。show()方法的语法结构：
jQuery对象.show(duration,[fn])；
8.1.2 toggle（）方法
语法：jQuery对象.toggle(duration,[fn])；
<head>
<script src="jquery-1.11.0.min.js"></script>
<style type="text/css">
div#menu{
margin:30px；
width:100px；
}
ul{
list-style:none；
}
ul li{
height:30px；
line-height:40px；
text-align:center；
border:1px solid #93D6C5；
border-bottom:none；
}
ul li a{
text-decoration:none；
}
ul li.title{
background-color:#F90
}
ul li.lastItem{
background-image:url(up.jpg)；
background-position:center top；
backgroun-repeat:no-repeat；
cursor:pointer；
border:none；
border-top:1px solid #93D6C5
}
ul li.down{
background-image:url(down.jpg)；
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li class="title">商品服务分类</li>
<li><a href="#">鞋包配饰</a></li>
<li><a href="#">运动户外</a></li>
<li><a href="#">珠宝手表</a></li>
<li><a href="#">手机数码</a></li>
<li><a href="#">家电办公</a></li>
<li><a href="#">护肤彩妆</a></li>
</ul>
</div>
<script type="text/javascript">
$(function(){
$("#menu li.lastItem").click(function(){
//切换菜单
$("#menu li:gt(3):not(:last)").toggle();
//更换底部箭头方向
$(this).toggleClass("down")；
})；
})；
</script>
</body>
