展开收缩效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.hpn{ display:none;}
</style>
</head>
<body>
<div id="pn" class="pn">
<p>分类：全部 电影 电视剧 综艺</p>
<div id="hpn" class="hpn">
<p>地区：大陆 香港 美国 韩国 法国 英国</p>
<p>类型：武侠 喜剧 冒险 战争 动画</p>
<p>时间：2016 2015 2014 2013 2012 2011 2010 </p>
</div>
</div>
<a href="javascript:void(0);" id="btn" class="btn">展开选项+</a>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.0/jquery.-----------js"></script>
<script>
$(function(){
$("#btn").toggle(
function(){
$(this).text("收起选项-");
$("#hpn").show();
},
function(){
$(this).text("展开选项+");
$("#hpn").hide();
}
)
})
</script>
<!--<script type="text/javascript">
window.onload=function () {//加载完毕
var hidediv=document.getElementById('hpn'),
btn=document.getElementById('btn'),
hflag=1;//标记是否隐藏
btn.onclick=function () {
if (hflag) {//当前为收起状态，展开函数
hidediv.style.display="block";
btn.innerHTML="收起选项-";
hflag=0;
}else {//当前为展开状态，收起函数
hidediv.style.display="none";
btn.innerHTML="展开选项+";
hflag=1;
}
}
}
</script>-->
</body>
</html>
