[英]How to slide a hidden div up/down on click of a button?
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. 非常感谢。
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"});
}
});
});
almost the same (as the other answer) just also working if you have more than one container: 几乎相同(如另一个答案),如果你有多个容器也可以工作:
http://jsfiddle.net/8ZFMJ/32/ http://jsfiddle.net/8ZFMJ/32/
$('.one').on('click',function(){
$(this).next('.two').slideToggle();
});
You can use slideToggle() : 你可以使用slideToggle() :
$('.one').click(function() {
$('.two').slideToggle();
})
我认为你需要使用jQuery的slideToggle()函数,你试过吗?
You need to use .slideToggle()
你需要使用.slideToggle()
$(".one").on('click',function(){
$(".two").slideToggle();
});
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. 您还可以根据自己的喜好删除链接样式,因此它看起来像普通文本。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.