jquery实现简单的手风琴效果

好久没发了，来随便发发，利用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="width: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
posted @ 2011-09-19 11:11  红油小生  Views(1148)  Comments(0)    收藏  举报