最简单的手风琴效果 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>手风琴</title>
</head>
<body>
	<div id="box">
		<ul>
			<span>1</span>
			<li>这是一</li>
		</ul>
		<ul>
			<span>2</span>
			<li>这是二</li>
		</ul>
		<ul>
			<span>3</span>
			<li>这是三</li>
		</ul>
		<ul>
			<span>4</span>
			<li>这是四</li>
		</ul>
	</div>
	
</body>
</html>

 

<script src="../jquery-1.12.0.js"></script>
<script>
	$(function(){
		$('li').hide()
		$('span').each(function(){
			$(this).click(function(){
				$('li').hide()
				$(this).next().show()
			})
		})
	})
<style>
		*{margin: 0; padding: 0}
		ul,li{list-style: none}
		/*ul{width: 300px;height: 50px;background: blue;border: 1px solid #efefef;}*/
		span{display:block;width: 300px;height: 50px;background: #89abec;border: 1px solid #efefef;text-align: center;line-height: 50px}
		#box{width: 300px;height: 400px;border: 1px solid #efefef;margin: 20px auto}
		li{height: 200px;background: #f2ddde}
	</style>

 

</script>

 

posted @ 2016-03-29 21:11  smalltimoo  阅读(376)  评论(2)  编辑  收藏  举报