<!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{ 300px;height: 50px;background: blue;border: 1px solid #efefef;}*/
span{display:block; 300px;height: 50px;background: #89abec;border: 1px solid #efefef;text-align: center;line-height: 50px}
#box{ 300px;height: 400px;border: 1px solid #efefef;margin: 20px auto}
li{height: 200px;background: #f2ddde}
</style>
</script>