<!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>

 

版权声明：本文为wyq-home原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/wyq-home/p/5334775.html