Html 如何切换 div 以使用 CSS 显示内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10127618/
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
How can I toggle a div to reveal content with CSS
提问by Jedda
So I've got a div that should expand to reveal a list when toggled. The before and after states can be seen here http://reversl.net/box/but what do I need to add to my styling to make this happen? I'd like to use css transitions for added effect. I'm not worried about browser compatibility because it's just for learning purposes. Any tips?
所以我有一个 div，它应该在切换时展开以显示一个列表。之前和之后的状态可以在这里看到http://reversl.net/box/但是我需要在我的样式中添加什么才能实现这一点？我想使用 css 过渡来增加效果。我不担心浏览器兼容性，因为它只是为了学习目的。有小费吗？
<div class="box"><img src="http://www.placehold.it/250x300" alt="" />
<div class="section progress">
<h4>
<a href="#">Div Before</a>
</h4>
<div class="metrics">
<div class="meter">
<span style="width: 75%"></span>
</div><!--.meter-->
</div><!--.metrics-->
</div><!--.section-progress-->
</div><!--.box-->
<div class="box"><img src="http://www.placehold.it/250x300" alt="" />
<div class="section progress">
<h4>
<a href="#">Div After</a>
</h4>
<div class="metrics">
<div class="meter">
<span style="width: 75%"></span>
</div><!--.meter-->
</div><!--.metrics-->
</div><!--.section-progress-->
<div class="sub_section">
<ul class="list">
<li>Item 1</li>
<li class="last">Item 2</li>
</ul>
</div><!--.sub_section-->
</div><!--.box-->
.boxes {
width: 100%;
padding: 1%;
}
.box {
width: 20%;
padding: 1%;
background: #fff;
-moz-box-shadow: 2px 3px 4px 0px #e9e9e9;
-webkit-box-shadow: 2px 3px 4px 0px #e9e9e9;
box-shadow: 2px 3px 3px 0px #e9e9e9;
display: inline-block;
margin-top: 1em;
}
.box img {
margin-bottom: 1%;
}
.progress a {
margin: 0;
padding: 0;
color: #999;
text-decoration: none;
}
.metrics {
margin: -1em 0 0 0;
padding: 0;
background: #c0c0c0;
}
.accordion .progress .meter {
background: #555;
width: 100%;
position: relative;
}
.meter > span {
height: 10px;
display: block;
background-color: #777;
position: relative;
overflow: hidden;
}
.sub_section {
margin-top: 1em;
border-bottom: none;
}
.list {
padding: 0;
margin: 0;
}
.list li {
background: #dcdcdc url('http://placehold.it/40x40') no-repeat;
font-size: 11px;
color: #999;
list-style: none;
padding: 1.3em 1em 1.3em 4.5em;
margin-bottom: 5px;
}
.list .last {
border-bottom: none;
}
回答by David says reinstate Monica
I'm afraid I couldn't work out, in your sample code and image, what you wanted to click on and what you wanted to show. However, the following works with an onclick-like event with pure CSS:
恐怕我无法解决，在您的示例代码和图像中，您想单击什么以及您想显示什么。但是，以下内容适用于onclick带有纯 CSS的-like 事件：
<div id="wrapper">
<ul id="top">
<li><a href="#one">One</a></li>
<li><a href="#two">Two</a></li>
</ul>
<div class="box" id="one">
<p>One</p>
<span><a href="#top">Close</a></span>
</div>
<div class="box" id="two">
<p>Two</p>
<span><a href="#top">Close</a></span>
</div>
</div>
CSS:
CSS：
.box {
position: absolute;
top: 20%;
left: 50%;
width: 50%;
margin-left: -25%;
border: 4px solid #000;
background-color: #f90;
/* the CSS, above, is all for aesthetic purposes, what matters is the following */
opacity: 0;
-webkit-transition: all 1s linear;
-ms-transition: all 1s linear;
-moz-transition: all 1s linear;
-0-transition: all 1s linear;
transition: all 1s linear;
}
.box:target {
opacity: 1;
-webkit-transition: all 1s linear;
-ms-transition: all 1s linear;
-moz-transition: all 1s linear;
-0-transition: all 1s linear;
transition: all 1s linear;
}
? JS小提琴演示。
Unfortunately it seems (in Chromium 17/Ubuntu 11.04) impossible to animate from display: none;to display: block;Similarly a transition from height: 0to height: autoalso fails (trying either results in a sudden appearance rather than a transition. So the content in the demo is always 'there,' but simply hidden (with opacity) and then shown once the relevant link is clicked.
不幸的是，似乎（在Chromium 17 / Ubuntu的11.04），不可能有生命的，从display: none;到display: block;同样一个从过渡height: 0到height: auto也失败（试图在一个突然出现的，而不是一个过渡任何结果。所以，在演示的内容始终是“有”，但简单地隐藏（不透明），然后在点击相关链接后显示。
However for a slide-toggle like effect:
但是对于类似滑动切换的效果：
.box {
/* aesthetic stuff excised for brevity */
opacity: 0;
height: 0;
overflow: hidden;
-webkit-transition: all 1s linear;
-ms-transition: all 1s linear;
-moz-transition: all 1s linear;
-0-transition: all 1s linear;
transition: all 1s linear;
}
.box:target {
opacity: 1;
height: 3em;
-webkit-transition: all 1s linear;
-ms-transition: all 1s linear;
-moz-transition: all 1s linear;
-0-transition: all 1s linear;
transition: all 1s linear;
}
? JS小提琴演示。
回答by kingjeffrey
You can use the "Checkbox Hack": http://css-tricks.com/the-checkbox-hack/
您可以使用“复选框黑客”：http: //css-tricks.com/the-checkbox-hack/
回答by redlena
Making these modifications of your code will give you a CSS transition.
对您的代码进行这些修改将为您提供 CSS 过渡。
Inside your <div class="box">, add a container <div class="trans">around the contents, like so:
在您的 中<div class="box">，<div class="trans">在内容周围添加一个容器，如下所示：
<div class="box">
<div class="trans">
<img src="http://www.placehold.it/250x300" alt="" />
<div class="section progress">
<h4>
<a href="#">Div After</a>
</h4>
<div class="metrics">
<div class="meter">
<span style="width: 75%"></span>
</div><!--.meter-->
</div><!--.metrics-->
</div><!--.section-progress-->
<div class="sub_section">
<ul class="list">
<li>Item 1</li>
<li class="last">Item 2</li>
</ul>
</div><!--.sub_section-->
</div><!--.trans-->
</div><!--.box-->
Then, in your css, add:
然后，在您的 css 中，添加：
.box > .trans {
height:365px;
overflow:hidden;
}
.box > .trans:hover{
height: 500px;
-webkit-transition: height .25s linear;
transition: height .25s linear;
}
This will give you a mouseenter/mouseleave type effect. I don't think you'd be able to do an "onclick" type effect that would hold it open with just CSS.
这会给你一个鼠标输入/鼠标离开类型的效果。我认为你不能做一个“onclick”类型的效果，只用 CSS 就可以让它保持打开状态。
回答by Alex Morales
You're gonna need to use javascript to listen for the event that fires the transition, unless you want it to apply on hover. so, you can start with something like this:
您将需要使用 javascript 来侦听触发转换的事件，除非您希望它在悬停时应用。所以，你可以从这样的事情开始：
$('.box').click(function(){
$(this).toggleClass('show');
});
Then in the css, you need to have the class with the new size and the transition applied:
然后在 css 中，您需要使用具有新大小和应用过渡的类：
.show
{
height: 300px;
-webkit-transition: height .25s ease-in-out;
transition: height .25s linear;
}
If you want a purely CSS solution, then you'll have to handle this using the ':hover' pseudo-class like redlena said. The only difference I would make is that you don't need an additional div (.trans) and you don't need to specify the child selector in your CSS either (.box > .trans).
如果你想要一个纯粹的 CSS 解决方案，那么你必须使用 ':hover' 伪类来处理这个问题，就像 redlena 说的那样。我要做的唯一区别是您不需要额外的 div (.trans)，也不需要在 CSS 中指定子选择器 (.box > .trans)。
