jquery - 如何在单击按钮时向上/向下滑动隐藏的 div？

Question

我想实现这种类型的向下滑动，而不是在悬停时我想我需要某种脚本来触发向下滑动，然后再次单击以触发反向向上滑动。我将隐藏一个 div(顶部:-400px；在页面顶部上方)，当单击按钮并向下滑动并位于顶部时: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，但这会产生“扩展”效果，这不是我想要实现的向下滑动类型。

非常感谢。

Answer 1

试试这个 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"});
    }
});
});