对于我正在工作的网站,我很想使用与此处类似的下拉效果 http://shop.jack-hughes.com/当您单击信息时,一个隐藏的 div 会掉下来。
如果它仅使用 CSS3 或 Javascript/CSS,我无法解决任何人都可以指出正确的方向或告诉我效果的名称;我想这很简单,但我这辈子都找不到另一个例子了。
最佳答案
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 没有区别。
关于javascript - 单击时隐藏标题下拉,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14777074/