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;
}

这是一个工作小提琴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"});
    }
});
});

Answer 2

几乎相同（如同另一个答案），如果您有多个容器，也可以正常工作：

http://jsfiddle.net/8ZFMJ/32/

$('.one').on('click',function(){
    $(this).next('.two').slideToggle();
});

Answer 3

您可以使用 slideToggle() ：

$('.one').click(function() {
    $('.two').slideToggle();    
})

<强> Fiddle Demo

Answer 4

我认为你需要使用jQuery的slideToggle（）函数，你试过吗？

Answer 5

您需要使用.slideToggle()

$(".one").on('click',function(){
    $(".two").slideToggle();
});

Demo

Answer 6

您可以使用纯CSS：http://jsfiddle.net/8ZFMJ/33/

来完成

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：

.one:focus + .two {
    top: 0px;
}

您还可以根据自己的喜好删除链接样式，因此它看起来像普通文字。

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

6 个答案: