CSS3 - 进行简单的点击下拉[关闭](CSS3 - Making a simple click-dropdown [closed])

有人可以帮助我使用与此页面相同的下拉列表的代码吗？

我想做同样的事情，完全相同的事情。

所以我得到它背后的CSS，例如。 #PresentationContainer .Pointer .PointerContent但是，我似乎无法通过下滑效果制作下拉列表。

此外，当单击该框时，我似乎无法使文本和图片显示在下拉列表中。 在这里有一些php进行了调用吗？

提前致谢 ：)

Can someone help me with the code for making the same dropdown as on this page?

I want to make the same thing, exactly the same thing.

So i get the CSS behind it, eg. #PresentationContainer .Pointer .PointerContent However, i do not seem to be able to make the dropdown with a sliding down effect.

Also, i do not seem to be able to make the text and pictures to show in a drop down, when the box is clicked. Is there some php involed in this?

Thanks in advance :)

原文：https://stackoverflow.com/questions/21049419

更新时间：2020-01-16 12:41

最满意答案

看起来该网站正在使用Jquery来执行交互和动画。 你可以这样做：

$('#button_id').on('click', clickButton);

function clickButton()

{

$(this).stop().slideToggle();

}

其中button_id是用户将单击的页面上元素的ID。

有关jquery slideToggle的更多信息，请访问： http ：//api.jquery.com/slidetoggle/

It looks like the site is using Jquery to perform the interaction and animation. You could do something like this:

$('#button_id').on('click', clickButton);

function clickButton()

{

$(this).stop().slideToggle();

}

Where button_id is the id of the element on your page that the user will be clicking.

For more info on jquery slideToggle: http://api.jquery.com/slidetoggle/

相关问答

尝试这个： .container {

width: 300px;

height: 150px;

position: relative;

background: yellow;

overflow: hidden;

}

.description {

width: 300px;

height: 100px;

position: absolute;

bottom: -60px;

transition: all .2s ease-in;

...

你错过了这一行的分号 animation:puzzle 4s;

---^

添加它，它将工作 - 演示 You're missing a semicolon in this line animation:puzzle 4s;

---^

Add it and it will work - DEMO

Theres有几种不同的方法可以做到这一点，我相信它们都不是万无一失的，下面是使用:focus方法的一个例子。 http://fiddle.jshell.net/rpwe4kzy/4/ CSS .hide{display: none;}

button:focus ~ .hide{ display: block;}

HTML

...

看起来该网站正在使用Jquery来执行交互和动画。 你可以这样做： $('#button_id').on('click', clickButton);

function clickButton()

{

$(this).stop().slideToggle();

}

其中button_id是用户将单击的页面上元素的ID。 有关jquery slideToggle的更多信息，请访问： http ：//api.jquery.com/slidetoggle/ It looks like th

...

我会使用类似Modernizr的东西来检测css3过渡是否可用： if(!Modernizr.csstransitions) {

// css3 isn't available

// maybe dealing with it in jQuery ?? or plain js

}

I'd use something like Modernizr to detect if css3 transitions are available or not: if(!Modernizr.cs

...

使用CSS3过渡的好处是，如果浏览器无法识别它们，它们将被忽略。 在这种情况下，转换将简单地回归到即时翻转。 我建议使用精灵图像 。 然后，而不是在悬停时更改图像...只需更改图像位置。 .button1 {

background-image: url('test_sprite.png');

background-position: top;

}

.button1:hover {

background-position: bottom;

transition: b

...

CSS3尚未成为标准......我相信它可以在FF中运行，但不能在

...

根据我在iPhone和iPod Touch上的经验(不是iPad，但我认为它们可能大致相同)，GIF在动画方面比CSS动画，过渡或你有什么要慢几个数量级。 我认为他们的帧率有意减慢，可能是为了节省电池寿命。 In my experience on iPhones and iPod Touches (not iPads, but I take it they'll probably be about the same), GIFs are several orders of magnitude sl

...

这是另一个很酷的CSS3渐变生成器，它可以让你通过视觉调整来学习。 http://www.colorzilla.com/gradient-editor/ 它们还在“关于”部分中链接到CSS3渐变文档的几个来源。 火狐 Safari和Chrome(Webkit) IE浏览器 歌剧 Here's another cool CSS3 gradient generator that will allow you to learn by visually tweaking things. http://ww

...

您可以使用CSS3动画来完成它，但要小心 - 它们不受广泛支持。 这是一个更新的jsFiddle。 animation: width ;

@keyframes width {

from { width: 0%; }

to { width: 60%; }

}​

You can do it using a CSS3 animation, but careful – they're not widely supported. Here's a

...