jquery写一个简单的手风琴

效果如下：

css部分

<style>
body, ul {
padding: 0px;
margin: 0px;
}
ul {
list-style: none;
width: 300px;
}
.group {
width: 300px;
text-align: center;
cursor: pointer;

}
.group > .title {
display: block;
height: 50px;
width: 298px;
font: 400 16px/50px "microsoft yahei";
border: 1px solid #eee;
color: #fff;
background-color: #06f;
}
.group > div {
border: 1px solid #eee;
width: 298px;
height: 100px;
display: none;
}
</style>

body部分

<ul class="wrap">
<li class="group">
<span class="title">标题1</span>
<div>我是第一个</div>
</li>
<li class="group">
<span class="title">标题2</span>
<div>我是第二个</div>
</li>
<li class="group">
<span class="title">标题3</span>
<div>我是第三个</div>
</li>
<li class="group">
<span class="title">标题4</span>
<div>我是第四个</div>
</li>
</ul>
<script src="lib/jquery/jquery-3.4.1.min.js"></script>
<script>
$(function(){
$(".group").mouseenter(function(){
$(this).find("div").show();
});
$(".group").mouseleave(function(){
$(this).find("div").hide();
});
});
</script>