<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<style>
#u1 li{
margin-bottom:10px;
background-color:orange;
font-size:20px;
font-weight:bolder;
cursor:pointer;
}
#u1 li ul{
list-style-type:none;
margin:0;
padding:0;
}
#u1 li ul li{
background-color:pink;
}
</style>
<script src="jquery-3.3.1.js"></script>
<script>
$(function () {
$('#u1 li ul li').hide();
$('#u1 li').click(function () {
$('ul li', $(this)).show(500);
$('ul li', $(this).siblings('li')).hide(500);
});
});
</script>
</head>
<body>
<div style="200px;height:500px;border:1px solid red">
<ul id="u1" style="list-style-type:none; margin:0; padding:0; text-align:center;">
<li>
幼儿园同学
<ul>
<li>鼻涕虫</li>
<li>爱哭鬼</li>
<li>张大胆</li>
</ul>
</li>
<li>
小学同学
<ul>
<li>张三丰</li>
<li>张无忌</li>
<li>乔布斯</li>
</ul>
</li>
<li>
初中同学
<ul>
<li>盖茨</li>
<li>种哥</li>
<li>奥巴马</li>
</ul>
</li>
</ul>
</div>
</body>
</html>