jquery - 移动所有网站内容的下拉菜单

Question

所以基本上我想做这样的事情: https://jsfiddle.net/czqy1jts/

html

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

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;
}

wrap 继承container 的height，container 的height 使用jQuery 设置(window.height) footer1 是隐藏的，我在上面使用了 slideToggle。 因此，当有人将鼠标悬停在 footer2 上时，footer1 会显示出来，footer2 和 footer3 会下降，从而为 footer2 腾出空间。

但我希望它从底部出现，同时为我的 div 使用 %。 所以我想我设置了我的包装器 bottom:0;我设置高度:自动...

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

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

这可能吗？

(如果我的英语很糟糕，那么抱歉，不是我的 1. 语言和我的 1. 堆栈溢出中的帖子，所以如果我犯了任何菜鸟错误，我深表歉意。)

Answer 1

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

https://jsfiddle.net/4kso7125/

$("#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);
});

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