如何切换div以使用CSS显示内容 [英] How can I toggle a div to reveal content with CSS

问题描述

所以我有一个div，应该展开以显示一个列表时切换。之前和之后的状态可以在这里 http://reversl.net/box/ 看到，但我需要添加到我的样式使这发生？我想使用CSS添加效果的过渡。我不担心浏览器兼容性，因为它只是为了学习目的。任何提示？

 < div class =box>< img src =http：//www.placehold .it / 250x300alt =/> 
< div class =section progress> 
< h4> 
< a href =＃> Div之前< / 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/250x300alt =/> 
< 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>项目1< / li> 
< li class =last>项目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; 
} 
  

解决方案

恐怕在你的示例代码和图像，你想点击什么，你想显示什么，。但是，以下工作与纯CSS的 onclick 类似的事件：

 < div id =wrapper> 
< ul id =top> 
< li>< a href =＃one>一个< / a>< / li& 
< li>< a href =＃two>两个< / a>< / li& 
< / ul> 
< div class =boxid =one> 
< p>一个< / p> 
< span>< a href =＃top>关闭< / a>< / span& 
< / div> 
< div class =boxid =two> 
< p>两个< / p> 
< span>< a href =＃top>关闭< / a>< / span& 
< / div> 
< / div> 
  

CSS：

 code> .box {
 position：absolute; 
 top：20％; 
 left：50％; 
 width：50％; 
 margin-left：-25％; 
 border：4px solid＃000; 
 background-color：＃f90; 
 / *上面的CSS，都是为了美观的目的，重要的是下面的* / 
 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; 
} 
  

显示中进行动画处理：

< none; 到 display：block; 同样，从 height：0 到 height：auto 也会失败（试图导致突然的外观，而不是转换）。因此，演示中的内容总是在那里，但只是隐藏

但是对于滑动切换效果：

  .box {
 / *为简洁而删除的美学内容* / 
 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 Fiddle demo 。

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 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;
}

解决方案

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:

<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:

.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 Fiddle demo.

Unfortunately it seems (in Chromium 17/Ubuntu 11.04) impossible to animate from display: none; to display: block; Similarly a transition from height: 0 to height: auto also 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.

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 Fiddle demo.

这篇关于如何切换div以使用CSS显示内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！