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从容器继承高度，容器的高度使用jQuery（window.height）设置 footer1是隐藏的，我使用slideToggle。因此当有人在页脚2上方悬停时，会显示页脚1并且页脚2和页脚3下降，从而为页脚2留出空间。

但我希望它从底部出现，同时使用％作为我的div。所以我想我设置我的包装底部：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.帖子在堆栈溢出，所以我的appologies，如果我犯了任何新手的错误。）

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上我让它显示（或淡化）然后我将所有内容设置为动画并取消绑定方法，因此它不会开始重复其功能。然后在鼠标触摸主要内容部分时重新绑定它。你可以检查小提琴。如果我听起来有点混乱，我不会感到惊讶。如果它在将来帮助某人，那么耶。无论如何，谢谢你的潜在帮助。

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

1 个答案: