好久没发了，来随便发发，利用jquery中的slideUp和silideDown来实现。
代码中有注释。
一个简单的上下滑动手风情效果。
首先看看html代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.title{
background-color:#09F;
color:#FFF;
font-size:14px;
padding:10px 0px;
text-align:center;
cursor:pointer;
}
.item{
background-color:#F60;
color:#FFF;
height:200px;
}
</style>
</head>
<body>
<div id="main" style="200px; margin:0px auto;">
<div style="margin-bottom:5px;">
<div class="title">The One</div>
<div class="item">kshdkgskgbbjsdhkg</div>
</div>
<div style="margin-bottom:5px;">
<div class="title">The Two</div>
<div class="item">kshdkgskgbbjsdhkg</div>
</div>
<div style="margin-bottom:5px;">
<div class="title">The Three</div>
<div class="item">kshdkgskgbbjsdhkg</div>
</div>
</div>
JS部分：
首先还是要引用jquery框架。
$(document).ready(function(){
$("._item").hide();
$("._item:first").show();
$("._title").click(function(){
if($(this).next().is(":hidden")) //判断当前点击的元素的下一个元素是否是hide状态
{
$("._item").slideUp();
$(this).next().slideDown();
}
})
})
效果演示地址
来源：http://www.colorff.com