javascript 尝试使用 - 顶部定位和 jquery 动画在单击时使 div 从页面顶部向下和向上滑动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20750784/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
trying to make a div slide down and up from top of page using - top positioning and jquery animate upon click
提问by Hyman blank
basically when a user clicks the .selector element the div .dropDown should slide up -100px and when they click again it should slide down to top: 0px.
基本上，当用户点击 .selector 元素时，div .dropDown 应该向上滑动 -100px，当他们再次点击时它应该向下滑动到顶部：0px。
$(document).ready(function(){
var orig = $(".dropDown").outerHeight(); // 104
var top = $(".dropDown").css("top");
if(top == "0px"){
$(".selector").on("click", function(e){
$(".dropDown").animate({top : "-100px"}, 400,
function(){
var top = $(".dropDown").css("top");
alert(top);
})
})
}
// else{
// $(".selector").on("click", function(e){
// $(".dropDown").animate({top : "0px"}, 400);
// $("body").css({"background-color" : "green"})
// })
// }
if($(".dropDown").css("top") == "-100px"){
$(".selector").on("click", function(e){
$(".dropDown").animate({top : "0px"}, 400);
$("body").css({"background-color" : "green"})
})
}
});
logic: if the dropDown div's top position is zero that means that the div is open(visible). when the user clicks the button to hide the dropDown div the div goes to -100px(hidden). then if the user wants to see the div again they click the button and the div goes back down to top: 0.
逻辑：如果下拉 div 的顶部位置为零，则表示该 div 是打开的（可见）。当用户单击按钮隐藏 dropDown div 时，div 变为 -100px（隐藏）。然后如果用户想再次看到 div，他们点击按钮，div 回到顶部：0。
Im having problem when the top is at -100px and when i click the button the dropdown doesnt slide down. please help with that. Thanks.
当顶部位于 -100px 时，我遇到了问题，当我单击按钮时，下拉列表不会向下滑动。请帮忙。谢谢。
while I was setting up the jsfiddleI realised that what I have so far works in FF but not in chrome. that is weird to me, if you can help me solve that problem too that would be also great.
当我设置jsfiddle 时，我意识到我目前在 FF 中有效，但在 chrome 中无效。这对我来说很奇怪，如果你也能帮我解决这个问题，那也太好了。
回答by Goose
You can achieve this by laying out your div as it should appear while expanded, and set display:none, but take the clickable tab out as a child element so that it is always visible. Then you can simplify your javascript quite a bit by using slideToggle. The 300value just specifies how fast you want it to slide.
您可以通过布置 div 来实现这一点，因为它应该在展开时出现，并设置display:none，但将可点击选项卡作为子元素取出，以便它始终可见。然后你可以通过使用slideToggle. 该300值仅指定您希望它滑动的速度。
Example:
例子：
$(document).ready(function(){
$('.selector').click(function () {
$('.dropDown').slideToggle(300);
});
});
Edit
编辑
Maintaining the border at this point is just styling, you can add a container div that holds your Information tab, and just give that a top-border. Here is a further updated jsFiddle.
此时保持边框只是样式，您可以添加一个容器 div 来保存您的信息选项卡，然后给它一个顶部边框。这是进一步更新的 jsFiddle。
