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

Question

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

8

我希望能实现下拉式的效果，但不是在悬停时触发，而是需要一种脚本来实现点击触发下拉，并再次点击触发反向上滑的效果。我会有一个隐藏的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，但它会创��一个“展开”效果，而这不是我想要实现的下拉滑动类型。

非常感谢。

- user2498890

1

现在你想要仅在点击时发生与:hover相同的事件吗？ - caramba

如果您正在使用jQuery，您可以使用JavaScript的onClick功能，不是吗？ - TylerH

是的，就是那种向下滑动的样式。我看过slideToggle，它会创建一种近乎展开的效果，这不是我想要的。 - user2498890

6个回答

6

与其他答案几乎相同，只是在您有多个容器的情况下也可以工作：

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

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

- caramba

2

您可以使用 slideToggle()：

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

演示代码

- Felix

您还可以通过使用 $('.two').slideToggle('fast'); 或 $('.two').slideToggle('slow'); 来调整动画速度。 - SimplyAzuma

谢谢您的回复，我已经看到了这个，但是我不想让内容“展开”，我想要整个东西向下滑动。很难解释。如果您比较一下悬停和您的小样，您应该能够看到我的意思以及我想要创建的效果。 - user2498890

1

你需要使用 .slideToggle()。

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

演示

- Dhaval Marthak

嗨，谢谢您的回复，是的，我看到了那个，但它会创建一种我不想要的“扩展”效果，我希望整个 div 能像我在顶部包含的 fiddle 中那样向下滑动。 - user2498890

1

我认为你需要使用jQuery的slideToggle()函数，你试过了吗？

- b4rbika

嗨，谢谢您的回复，是的，我看到了那个，但它会创建一种类似于“扩展”的效果，我想要整个 div 像我在顶部包含的 fiddle 中那样向下滑动。 - user2498890

0

你可以使用纯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;
}

您还可以根据自己的喜好删除链接样式，使其看起来像普通文本。

- Kroltan

当<div class="two">可见时，您如何关闭它？ - caramba

@caramba 点击 div 以外的区域，就像普通的通知弹出窗口一样。这是使用 CSS 的唯一限制。 - Kroltan

@user2498890 对我来说可行，适用于Mac上的FF 30.0。也适用于我的过时Chrome。 - Kroltan

@Kroltan 我自己也没有发现，如果能添加一个活动状态或其他什么东西就好了。 - caramba

据我所知，你无法仅使用CSS添加状态。如果你想要更复杂的东西，可以使用Javascript。 - Kroltan

我正在使用Safari 6.1，但它似乎无法正常工作，我需要一些跨浏览器的解决方案。感谢您迄今为止的帮助。 - user2498890

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mayank Tripathi · Accepted Answer

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