Jquery 移动所有站点内容的下拉菜单

所以基本上我想这样做：

html

包裹从容器继承高度，容器的高度使用jQuery window.height设置 页脚1是隐藏的，我在上面使用了滑动切换。 因此，当有人将鼠标悬停在footer2上时，footer1显示出来，footer2和footer3下拉，为footer2腾出空间

但我希望它从底部上升，同时使用%作为我的div。 所以我想我把包装器的底部设置为：0；我设置了高度：自动

<div id="wrap">
    <div id="footer3"></div>
    <div id="footer2">HOVER OVER</div>
    <div id="footer1"></div>
</div>

它是有效的，但与百分比无关。 这是通过使用vh单元实现的，但我发现对这些单元的支持太少太晚了，所以我认为我应该重新开始并尝试使用%来完成。 但我不知道怎么做。我已经尝试了我所有的想法，我想我已经没有了。问题是我的包装器必须是自动的并且在底部，这样当我滑动切换隐藏元素时，它为隐藏元素腾出空间，从而将所有其他内容向上推。但我不能将其设置为自动，因为这样我的部门就不知道该以什么为基础

这可能吗

---

如果我的英语很烂，那么对不起，不是我的1。语言和我的1。在堆栈溢出中发帖，所以如果我犯了任何新手错误，我会向你道歉。

无论如何。。。我找到了解决办法。我放弃了slidetoggle方法，改用mouseenter和mouseleave

---

如果有人感兴趣，那就有解决办法。我基本上在底部添加了菜单并将其隐藏。然后在mouseenter上，我只是让它显示或fadein，然后我设置所有内容的动画并解除方法的绑定，这样它就不会开始重复它的功能。然后当鼠标触到主要内容部分时重新绑定。你可以检查小提琴。如果我听起来有点困惑，我也不会感到惊讶。如果它在将来对某人有帮助，那么是的。无论如何，谢谢你潜在的帮助

另一个参考，我尝试用纯HTML和CSS绘制您想要的内容。看这里

#wrap {
  height:inherit;
  width:100%;
  position:relative;     
  bottom:0;
  background-color:purple;
}


#footer1 {
  height:10%;
  background-color:yellow;
  width:100%;
  position:relative;
}

#footer2 {
  height:20%;
  background-color:purple;
  width:100%;
  text-align:center;
}

#footer3 {
  height:80%;
  background-color:red;
  width:100%;
  bottom:0px;
}

<div id="wrap">
    <div id="footer3"></div>
    <div id="footer2">HOVER OVER</div>
    <div id="footer1"></div>
</div>

$("#footer1").hide();
var minuMeetod = function () {
    $("#footer1").show();
    $("#wrap").animate({
        bottom: "+10%"
    }, 100);
};
$("#footer2").bind("mouseenter", minuMeetod);
$("#footer1").on("mouseenter", function () {
    $("#footer2").unbind("mouseenter");
});



$("#footer3").on("mouseenter", function () {
    $("#footer2").bind("mouseenter", minuMeetod);
});
$("#footer1").on("mouseleave", function () {
    $("#footer1").fadeOut();
    $("#wrap").animate({
        bottom: "-0em"
    }, 100);
});