需要准备内容：
<style>
* {
margin:0;
padding:0;
}
body {
font-size: 13px;
line-height: 130%;
padding: 60px;
}
#panel {
300px;
border: 1px solid #0050D0;
}
.head {
height:24px;
line-height:24px;
text-indent:10px;
background: #96E555;
cursor:pointer;
100%;
}
.content {
padding: 10px;
text-indent:24px;
border-top: 1px solid #0050D0;
display:block;
display:none; //隐藏class内容
}
</style>
<body>
<div id="panel">
<h5 class="head" >jquery</h5>
<div class="content">
jquery 是prototype之后又一个优秀的JavaScript库，叭叭叭生死狙击多斯拉克开始看久违的卡
了吗开始看没Wii是；卢卡申科开始看开什么看电视看你瘦的
</div>
</div>
</body>
以上是准备的html内容
基础版点击切换 点击可以展示出隐藏内容
$("#panel h5.head").bind("click",function(){ //bind后面给了click点击事件
if ($(this).next().is(":visible")) {
$(this).next().hide();
}else
$(this).next().show();
})
因为上面出现了好几次 $(this).next()所以用var定义一个contents跟上面效果一样
$("#panel h5.head").bind("click",function(){ //bind后面给了click点击事件，判断如果已经显示了就隐藏起来，如果没有显示就展示
var $contents=$(this).next();
if($contents.is(":visible")){
$contents.hide();
}else{
$contents.show();
}
}
改变绑定事件的类型
把bind()里的click改成mouseover ，mouseout 点击事件就变成了鼠标滑动展示
$("#panel h5.head").bind("mouseover",function(){ //mouseover 放上展示内容
$(this).next().show();
}).bind("mouseout",function(){ //mouseout 拿走收起内内容
$(this).next().hide();
}
)