Question

对于我正在处理的网站，当您点击信息隐藏的div下降时，我非常希望使用与http://shop.jack-hughes.com/类似的下拉效果。

如果它只使用CSS3或者Javascript / CSS我可以解决问题，任何人都可以指出我正确的方向或告诉我效果的名称;我觉得很简单但是对于我的生活却找不到另一个例子。

Answer 1

他们有一小段Javascript可以在任何网站上轻松完成。基本上你需要在页面顶部隐藏div，点击链接后你只需显示div。

他们使用的代码是：

Event.observe('info', 'click', function(){
    $('aside').toggleClassName('open');
});

但是如果你看一下jquery那么你就会发现对元素的操纵很容易。

他们另外使用的一件事是他们的open类中的CSS3过渡：

.aside {
     transition: all 0.3s ease-out 0s
}

这是导致平滑过渡效果的原因。所以你可以使用jQuery或CSS3过渡，两者都会产生相同的效果。我会说CSS3转换更好，但如果它们不支持转换，你将会疏远某些浏览器。

Answer 2

可能使用jQuery。类似的东西：

http://api.jquery.com/toggle/

Answer 3

CCS3和js的组合

以下是您引用的网站中使用的内容

<强> JS ：

Event.observe(window, 'load', function () {
    Event.observe('info', 'click', function () {
        $('aside').toggleClassName('open');
    });
});

Event.observe来自原型框架 - http://prototypejs.org/doc/latest/dom/Event/observe/

例如jQuery（http://jquery.com/）中的等价物将是：

$(document).ready(function () {
    $('.info').click(function () {
        $('aside').toggleClass('open');
    })
});

<强> CSS ：

aside.open {
    height: 21.25em;
}

aside {
    position: relative;
    background-color: #3f4642;
    width: 100%;
    color: white;
    letter-spacing: 0.1em;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

HTML元素为<aside>....</aside>但如果选择div则没有区别。

Answer 4

除了Deif发现他们还使用CSS过渡

之外

transition: all 0.3s ease-out;

并且还为他们的“搁置”类使用“:: selection”伪类，请参阅developer.mozilla.org

隐藏标题下拉单击

4 个答案: