我希望实现这种类型的向下滑动除了而不是悬停我认为我需要某种类型的脚本触发向下滑动单击然后再次单击以触发反向滑动.我将隐藏一个div(顶部：-400px;位于页面顶部之上),当单击按钮并向下滑动并坐在顶部时：0;
<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
.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;
}
这是一个工作小提琴http://jsfiddle.net/8ZFMJ/2/ – 任何帮助将不胜感激.
我尝试过使用slideToggle然而这会创建一个“扩展”效果,这不是我想要实现的向下滑动的类型.
非常感谢.
解决方法
试试这个
http://jsfiddle.net/webcarvers/8ZFMJ/34/
删除这个：
.one:hover + .two {
top: 0px;
}
用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"});
}
});
});
