HTMLCSS中的可折叠面板

概述我正在组建一个网站.我需要帮助创建以下功能： 我希望“关于”链接在单击时展开到面板中,并在用户按下面板中的“隐藏”时收回.我在下面附上了一张图表来说明它应该是什么样子.当用户在(1)中按下约时,它变为(2),并且当用户按下(2)中的隐藏时,它再次变为(1). 如果可能的话,我想在纯HTML / CSS中这样做.有谁知道我怎么做到这一点？ 这个答案解释了如何完全实现： Pure CSS collap 我正在组建一个网站.我需要帮助创建以下功能：

我希望“关于”链接在单击时展开到面板中,并在用户按下面板中的“隐藏”时收回.我在下面附上了一张图表来说明它应该是什么样子.当用户在(1)中按下约时,它变为(2),并且当用户按下(2)中的隐藏时,它再次变为(1).

如果可能的话,我想在纯HTML / CSS中这样做.有谁知道我怎么做到这一点？

解决方法 这个答案解释了如何完全实现： Pure CSS collapse/expand div

这是一个快速纲要：

<div >    <a href="#hIDe1"  ID="hIDe1">+</a>    <a href="#show1"  ID="show1">-</a>    <div > Question Question Question Question Question Question Question Question Question Question Question? </div>        <div >            <p>Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer </p>        </div></div>

CSS

/* source: http://www.ehow.com/how_12214447_make-collapsing-Lists-java.HTML */.FAQ {   vertical-align: top;   height: auto; }.List {  display:none;   height:auto;  margin:0;  float: left;}.show {  display: none; }.hIDe:target + .show {  display: inline; }.hIDe:target {  display: none; }.hIDe:target ~ .List {  display:inline; }/*style the (+) and (-) */.hIDe,.show {  wIDth: 30px;  height: 30px;  border-radius: 30px;  Font-size: 20px;  color: #fff;  text-shadow: 0 1px 0 #666;  text-align: center;  text-decoration: none;  Box-shadow: 1px 1px 2px #000;  background: #cccbbb;  opacity: .95;  margin-right: 0;  float: left;  margin-bottom: 25px;}.hIDe:hover,.show:hover {  color: #eee;  text-shadow: 0 0 1px #666;  text-decoration: none;  Box-shadow: 0 0 4px #222 inset;  opacity: 1;  margin-bottom: 25px;}.List p {  height:auto;  margin:0;}.question {  float: left;  height: auto;  wIDth: 90%;  line-height: 20px;  padding-left: 20px;  margin-bottom: 25px;  Font-style: italic;}

和工作的Jsfiddle：

http://jsfiddle.net/dmarvs/94ukA/4/

再一次,上述所有内容都不是我的工作,只是为了澄清,但它只是表明在Google上找到它是多么容易！

总结

以上是内存溢出为你收集整理的HTML/CSS中的可折叠面板全部内容，希望文章能够帮你解决HTML/CSS中的可折叠面板所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。