Javascript 如何创建垂直下拉菜单？

我正在尝试创建一个页脚菜单，通过单击位于两个div的父div中的div的另一部分来弹出

<div id="parent">
 <div id ="child-control">
  some content
 <div>
 <div id="child-slide">
  some content
 </div>
</div>

一些内容
一些内容

对于滑动动作，我只使用隐藏设置隐藏底部div。父div只是整个网页的宽度。所以两个孩子都是100%宽度

<style>
#child-slide {
display: hidden;
height: 250px;
}
</style>

#儿童幻灯片{
显示：隐藏；
高度：250px；
}

这是JS

<script>
 $(document).ready(function(){
  $("#child-control").click(function(){
   $("#child-slide").slideToggle("slow");
   });
 });
</script>

$（文档）.ready（函数（）{
$（“#子控件”）。单击（函数（）{
$（“儿童幻灯片”）。幻灯片切换（“慢速”）；
});
});

---

但最终的结果是，当使用一个简单的切换jQuery函数时，它并没有真正“向上滑动”但它打开时就像在中一样，只是拉/滚下以显示子幻灯片div。我更希望它像本页底部的菜单一样向上拉-但不确定如何设置来实现这一点。

设置底部位置的动画他们在那里做的事情要复杂得多，您需要查看源代码。希望能有帮助。