我希望能实现下拉式的效果,但不是在悬停时触发,而是需要一种脚本来实现点击触发下拉,并再次点击触发反向上滑的效果。我会有一个隐藏的div(top:-400px;在页面顶部之上),当点击按钮时,它将下滑并停留在top: 0;
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
.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;
}
这里有一个可用的fiddle示例,链接为http://jsfiddle.net/8ZFMJ/2/,希望能得到帮助。
我已经尝试使用slideToggle,但它会创���一个“展开”效果,而这不是我想要实现的下拉滑动类型。
非常感谢。