Html 单击纯 CSS 时向下滑动 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13412054/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Slide down div on click Pure CSS?
提问by KXXT
I found this post How to create sliding DIV on click?
我发现这篇文章如何在点击时创建滑动 DIV？
But all the answers are Jquery methods. Is there any way to create this with PURE CSS? I have a couple other things in mind as well...
但所有的答案都是 Jquery 方法。有什么办法可以用 PURE CSS 创建这个吗？我还有其他一些想法......
- What can I add to make the slide down div stay put when scrolling
- Change the link that triggers the animation to "Close" in order to make the div slide back up
- 我可以添加什么来使向下滑动的 div 在滚动时保持不变
- 将触发动画的链接更改为“关闭”，以使 div 滑回
Here is a link to the example in that post// http://shutterbugtheme.tumblr.com/
这是该帖子中示例的链接// http://shutterbugtheme.tumblr.com/
I've also tried googling but the only results are jquery methods...
我也试过谷歌搜索，但唯一的结果是 jquery 方法......
回答by Dudley Storey
It can be done, although it's a little bit of a hack. The two elements that retain state (referred to in CSS as :checked) are the checkbox and radio button element. So if you associate a checkbox with a label by using a for attribute and add a div, you can get a result by reading the status of the (hidden) button:
这是可以做到的，虽然它有点小技巧。保持状态的两个元素（在 CSS 中称为 :checked）是复选框和单选按钮元素。因此，如果您使用 for 属性将复选框与标签相关联并添加 div，则可以通过读取（隐藏）按钮的状态来获得结果：
<div class=window>
<input type=checkbox class=toggle id=punch>
<label for=punch>Punch It, Chewie<label>
<div><p>Here's my content. Beep Boop Blurp.</p></div>
</div>
And the CSS:
和 CSS：
input.toggle { display: none; }
input.toggle ~ div { height: 0px; margin: .2rem; overflow: hidden; }
input.toggle:checked ~ div { height: 180px; }
A further explanation and example that includes an animated open/close effect.
回答by Kyle
This is impossible in pure CSS to recognise a click. You can do it with :hover and a transition, but that is as close as you're going to get without javascript.
这在纯 CSS 中是不可能识别点击的。您可以使用 :hover 和过渡来完成，但这与没有 javascript 的情况一样接近。
.hover
{
cursor: pointer;
position: relative;
z-index: 1;
}
.slide
{
position: absolute;
top: 0;
z-index: -1;
-webkit-transition: top 1s;
-moz-transition: top 1s;
}
.hover:hover + .slide
{
top: 50px;
}
http://jsfiddle.net/Kyle_/MaMu9/1/
http://jsfiddle.net/Kyle_/MaMu9/1/
Be aware though that transitions are CSS3 and will not work in IE<9 and older versions of better browsers.
请注意，过渡是 CSS3 并且在 IE<9 和更好的浏览器的旧版本中不起作用。
Edit: after another answer was posted using the :focus property in CSS: it is possible with one caveat: you have to click outside of the element that makes it slide down to make it slide up, otherwise it works fine.
编辑：在使用 CSS 中的 :focus 属性发布另一个答案之后：有一个警告是可能的：您必须在元素外部单击使其向下滑动以使其向上滑动，否则它可以正常工作。
Be aware that the element must have tabindex='1' (or any number that makes sense depending on where the element is in the document) for this to work.
请注意，元素必须具有 tabindex='1'（或任何有意义的数字，具体取决于元素在文档中的位置）才能使其工作。
.hover:focus + .slide
{
top: 50px;
-webkit-transition: top 1s;
}
回答by lostsource
You can recognize a 'focus' event on an element and act upon it using a CSS transition.
您可以识别元素上的“焦点”事件并使用 CSS 转换对其进行操作。
Here's an example which will move a div 50px down when clicked
这是一个示例，单击时会将 div 向下移动 50px
Markup
标记
<div tabindex='1' id='box'></div>?
CSS
CSS
#box {
background-color:#3a6d90;
width:100px; height:100px;
transition: margin-top 2s;
-moz-transition: margin-top 2s; /* Firefox 4 */
-webkit-transition: margin-top 2s; /* Safari and Chrome */
-o-transition: margin-top 2s; /* Opera */
}
#box:focus {
margin-top:50px;
outline:0;
}
Working example: http://jsfiddle.net/NBHeJ/
工作示例：http: //jsfiddle.net/NBHeJ/
回答by Calvin
This is a good example of how to get started. You can see at the bottom, they post the source for the animate function they use, although this is javascript.
这是如何开始的一个很好的例子。您可以在底部看到，他们发布了他们使用的 animate 函数的源代码，尽管这是 javascript。
If you want pure css, I'd use ws3schools has been excellent resource for many years, though be aware that a lot depends on browser support as to whether the effect you want will work or not.
如果你想要纯 css，我会使用 ws3schools 多年来一直是很好的资源，但请注意，很大程度上取决于浏览器支持你想要的效果是否会起作用。
Basic structure to make the effect they have, you just need to work along the lines of two divs within the body, at the top hidden and the container visible, and run the animation of the hidden div to display pushing the other div down, keeping them both inline.
实现它们的效果的基本结构，你只需要沿着body内两个div的线工作，在顶部隐藏和容器可见，并运行隐藏div的动画以显示推动另一个div向下，保持他们都内联。
<body>
<div id="hidden-div"></div>
<div id="main-content-div"></div>
</body>
回答by Danield
This can be done using the targetpseudo class to detect the click.
这可以使用target伪类来检测点击来完成。
Set the button href to the id of the sliding div.
将按钮 href 设置为滑动 div 的 id。
The slide down can then be done by setting the height of the sliding div on the slidingDiv :target class using a css3 transitionon the height.
然后可以通过使用 css3transition在高度上设置滑动 div 上的滑动 div 的高度来完成向下滑动：目标类。
I don't think there's a way for the original button to change its href to close the sliding div using pure css, however you could always add a close button on the sliding div to close it.
我认为原始按钮没有办法更改其 href 以使用纯 css 关闭滑动 div，但是您始终可以在滑动 div 上添加关闭按钮来关闭它。
This close button works by adding the same transition on the sliding div class.
这个关闭按钮的工作原理是在滑动 div 类上添加相同的过渡。
Here is a WORKING DEMO.
这是一个工作演示。
Enjoy.
享受。
回答by Sedric Heidarizarei
Run This Code.
运行此代码。
input {
display: none;
}
label {
cursor: pointer;
display: inline-block;
padding: 10px 20px;
border: 1px solid;
border-radius: 4px;
background: tomato;
color: #FFF;
font-family: arial;
-webkit-transition: background-color 0.1s, color 0.1s;
}
label:hover {
background: #blue;
color: #blue;
}
.test {
-webkit-transition: height .3s ease;
height: 0;
overflow: hidden;
width: 200px;
background: tomato;
margin-top: 10px;
color: #FFF;
}
input:checked + .test {
height: 100px;
}<label for="check">Click me</label>
<input id="check" type="checkbox">
<div class="test">
<p>I am some hidden text</p>
</div>回答by Arthur Araújo
Easy:
简单：
.contents {
background: yellow;
color: rgba(0, 0, 0, .8);
padding: 20px;
margin:0;
}
.slide-up, .slide-down {
overflow:hidden
}
.slide-up > div, .slide-down > div {
margin-top: -25%;
transition: margin-top 0.4s ease-in-out;
}
.slide-down > div {
margin-top: 0;
}
Working example: https://jsfiddle.net/webarthur/3ep33h5s/
回答by Arthur Araújo
Another way to do the same thing:
做同样事情的另一种方法：
.contents {
background: yellow;
color: rgba(0, 0, 0, .8);
padding: 20px;
margin:0;
}
.slide-up, .slide-down {
overflow:hidden;
}
.slide-up > div, .slide-down > div {
transform: translateY(-100%);
transition: .4s ease-in-out;
}
.slide-down > div {
transform: translateY(0);
}
Working example: https://jsfiddle.net/webarthur/3ep33h5s/1/
