怎么样才能用层级选择器做出折叠菜单的效果？
<body><ul class="menu-list">
<li>
<p class="menu-head">菜单一</p>
<div class="menu-body">
<a href="#">1</a>
<a href="#">1</a>
<a href="#">1</a>
<a href="#">1</a>
<a href="#">1</a>
</div>
</li>
<li>
<p class="menu-head">菜单二</p>
<div class="menu-body">
<a href="#">2</a>
<a href="#">2</a>
<a href="#">2</a>
<a href="#">2</a>
<a href="#">2</a>
</div>
</li>
<li>
<p class="menu-head">菜单三</p>
<div class="menu-body">
<a href="#">3</a>
<a href="#">3</a>
<a href="#">3</a>
<a href="#">3</a>
<a href="#">3</a>
</div>
</li>
<li>
<p class="menu-head">菜单四</p>
<div class="menu-body">
<a href="#">4</a>
<a href="#">4</a>
<a href="#">4</a>
<a href="#">4</a>
<a href="#">4</a>
<a href="#">4</a>
</div>
</li>
</ul>
<script>
$(function(){
$(".menu-body").hide();
$(".menu-head").click(function(){
})
})
</script>
要用到show和hide，并且点开菜单A的时候下面展开，点开菜单B的时候菜单A缩回去
