gpt4 book ai didi

javascript - 滑入/滑出标题 div/显示部分隐藏的 div

转载 作者:可可西里 更新时间:2023-11-01 13:15:42 26 4
gpt4 key购买 nike

如果能提供解决此问题的帮助和见解,我将不胜感激。我正在开发一个初始可见高度为 180 像素的标题 div 的网站。标题 div 的总高度为 340px。当用户单击链接时,我需要标题 div 向下滑动以显示其其余部分(顶部)。因此,从数学上讲,当用户加载页面时,将显示 340px 标题 div 的底部 180px。当他们单击链接时,div 的其余部分向下滑动以显示其顶部 160 像素。当用户单击同一个链接时,标题 div 会向上滑动,因此只会再次显示底部的 180 像素。

我试过让它工作,但我不确定我做错了什么。我最初的想法是使用 slideToggle()(隐藏/显示),但我似乎无法让它工作。 StackOverflow 上的其他人建议使用 animate(),但我也不知道如何让它工作。

我在 StackOverflow 上搜索过,似乎发现了很多关于显示和隐藏整个 div 的问题,但问题是这完全显示和隐藏了 div。我需要我的 div 向下滑动以显示顶部隐藏部分,然后向上滑动回到其原始静止位置(屏幕外 -160 像素)。

任何帮助将不胜感激!我在下面包含了我的入门代码:

HTML:

<div id="header">
<a href="#header" class="toggle">Click me to reveal the top half of this div</a>
</div>

JQuery:

$(document).ready(function(){
$('.toggle').click(function(){
$('#header').slideToggle("slow");
return false;
});
});

CSS:

#header {
position: fixed; /*I would like this div to always be fixed to the top of the browser window*/
top: 160px;
left: 0;
width: 100%;
height: 340px;
z-index: 10;
}

最佳答案

请试试这个 JSFiddle。

http://jsfiddle.net/WFxLJ/3/

关于javascript - 滑入/滑出标题 div/显示部分隐藏的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10254895/

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