gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 07:52:55 24 4
gpt4 key购买 nike

所以基本上我想做这样的事情: 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. 堆栈溢出中的帖子,所以如果我犯了任何菜鸟错误,我深表歉意。)

最佳答案

无论如何...我找到了解决方案。我放弃了 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 。如果我听起来有点困惑,我不会感到惊讶。如果它在将来对某人有帮助,那么是的。无论如何,感谢潜在的帮助。

关于jquery - 移动所有网站内容的下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30284595/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com