javascript - 单击时隐藏标题下拉

Question

对于我正在工作的网站，我很想使用与此处类似的下拉效果 http://shop.jack-hughes.com/当您单击信息时，一个隐藏的 div 会掉下来。

如果它仅使用 CSS3 或 Javascript/CSS，我无法解决任何人都可以指出正确的方向或告诉我效果的名称；我想这很简单，但我这辈子都找不到另一个例子了。

Answer 1

CCS3与js的结合

这是您引用的网站中使用的内容

js:

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

Event.observe来自原型(prototype)框架 - 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 没有区别。