css下拉点击不动,CSS3 - 进行简单的点击下拉[关闭](CSS3 - Making a simple click-dropdown [closed])...
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
Show text
Hidden type
...
看起来该网站正在使用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
...