文章地址：https://www.cnblogs.com/sandraryan/
利用slideUp slideDown动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
ul li {
background-color: lightblue;
border: 1px solid white;
200px;
text-align: center;
}
span {
display: block;
color: white;
line-height: 26px;
}
ul {
list-style: none;
}
.box div {
height: 150px;
200px;
background-color: #fff;
display: none;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>
<span>title 1</span>
<div>我是弹出来的div1</div>
</li>
<li>
<span>title 2</span>
<div>我是弹出来的div2</div>
</li>
<li>
<span>title 3</span>
<div>我是弹出来的div3</div>
</li>
<li>
<span>title 4</span>
<div>我是弹出来的div4</div>
</li>
</ul>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
$(function(){
// 每一个span注册点击事件
$('span').click(function(){
// 被点击的span的下一个元素（div）滑下去，同时span的父级（li）的相邻兄弟（其他li）划上去
// slideDown slideUp只会对显示/隐藏的元素起作用
$(this).next().slideDown().parent().siblings().children('div').slideUp();
});
});
</script>
</body>
</html>
最开始只有span会被显示在页面中，点击span会让当前span的相邻兄弟div出现，其他相邻的li执行相反操作（如果可以）