jQuery 如何在单击按钮时向上/向下滑动隐藏的 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22071740/
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
How to slide a hidden div up/down on click of a button?
提问by user2498890
I want to achieve this type of a slide down except instead of on hover I think I need some sort of script that triggers the slide down on click and then click again to trigger the reverse slide up. I will have a div thats hidden (top: -400px; above the top of the page) and when the button is clicked with slide down and sit at top: 0;
我想实现这种类型的向下滑动，而不是悬停时，我想我需要某种脚本来触发向下滑动，然后再次单击以触发反向向上滑动。我将有一个隐藏的 div（顶部：-400px；在页面顶部上方），当点击按钮时向下滑动并坐在顶部：0；
HTML
HTML
<div class="container"><div class="one">Hover me to reveal new div</div>
<div class="two">I slid!<br>And I am higher than the div before me...</div>
</div>
CSS
CSS
.container {
overflow:hidden;
height: 60px;
}
.one {
position: relative;
top: 0;
background-color: lightblue;
z-index: 1;
}
.two {
position: relative;
top: -40px;
background-color: yellow;
z-index: -1;
-webkit-transition: top 1s;
-moz-transition: top 1s;
-o-transition: top 1s;
transition: top 1s;
}
.one:hover + .two {
top: 0px;
}
Here is a working fiddle http://jsfiddle.net/8ZFMJ/2/- any help would be appreciated.
这是一个工作小提琴http://jsfiddle.net/8ZFMJ/2/- 任何帮助将不胜感激。
I have tried using slideToggle however this creates an 'expanding' effect which isn't the type of slide down I want to achieve.
我曾尝试使用 slideToggle 但这会产生“扩展”效果，这不是我想要实现的向下滑动的类型。
Many thanks.
非常感谢。
回答by Mayank Tripathi
Try this http://jsfiddle.net/webcarvers/8ZFMJ/34/
试试这个http://jsfiddle.net/webcarvers/8ZFMJ/34/
remove this:
删除这个：
.one:hover + .two {
top: 0px;
}
add this with jQuery Js
用 jQuery Js 添加这个
$(document).ready(function(){
var clicked=true;
$(".one").on('click', function(){
if(clicked)
{
clicked=false;
$(".two").css({"top": 0});
}
else
{
clicked=true;
$(".two").css({"top": "-40px"});
}
});
});
回答by caramba
almost the same (as the other answer) just also working if you have more than one container:
几乎相同（与另一个答案一样），如果您有多个容器也可以使用：
$('.one').on('click',function(){
$(this).next('.two').slideToggle();
});
回答by Felix
You can use slideToggle():
您可以使用slideToggle()：
$('.one').click(function() {
$('.two').slideToggle();
})
回答by Dhaval Marthak
You need to use .slideToggle()
你需要使用 .slideToggle()
$(".one").on('click',function(){
$(".two").slideToggle();
});
回答by b4rbika
I think you need to use jQuery's slideToggle() function, have you tried that?
我认为您需要使用 jQuery 的 slideToggle() 函数，您尝试过吗？
回答by Kroltan
You can do it using pure CSS: http://jsfiddle.net/8ZFMJ/33/
您可以使用纯 CSS：http: //jsfiddle.net/8ZFMJ/33/
HTML:
HTML：
<div class="container">
<a href="#" class="one">Hover me to reveal new div</a>
<div class="two">
I slid!<br>
And I am higher than the div before me...
</div>
</div>
CSS:
CSS：
.one:focus + .two {
top: 0px;
}
You can also remove the link styling to your taste, so it looks like regular text.
您还可以根据自己的喜好删除链接样式，使其看起来像普通文本。
