HTML/CSS中的可折叠面板
HTML/CSS中的可折叠面板
提问于 2013-05-12 03:26:43
我在建一个网站。我需要帮助创建以下功能：
我希望“关于”链接在单击时展开为一个面板，并在用户按下面板中的“隐藏”时收回。我在下面附上了一张图表，以阐明它应该是什么样子。当用户按下(1)时，它变成(2)，当用户按下hide in (2)时，它再次变成(1)。
如果可能的话，我想用纯HTML/CSS来做这件事。有人知道我是怎么做到的吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-05-12 04:03:59
这个答案完整地解释了如何实现它：Pure CSS collapse/expand div
下面是一个简短的概述：
<div class="FAQ">
<a href="#hide1" class="hide" id="hide1">+</a>
<a href="#show1" class="show" id="show1">-</a>
<div class="question"> Question Question Question Question Question Question Question Question Question Question Question? </div>
<div class="list">
<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/
再说一次，以上都不是我的工作，只是为了澄清，但它只是去表明它是多么容易在谷歌上找到它！
Stack Overflow用户
发布于 2013-05-12 03:51:27
你需要少量的javascript来触发一个事件(显示/隐藏div)
<a href="#"> Home </a>
<a class="right" href="javascript:toggle_messege('inline')" id='href_about'> About </a>
<br />
<a class="right hide" href="javascript:toggle_messege('none')" id='hreh_close'> (Close)</a>
<div id='div_messege' class='hide'>Hidden messege to show, Hidden messege to show Hidden messege to show Hidden messege to show</div>
<p>Test Test TestTestTestTestTestTestTest</p>
<p>Test Test TestTestTestTestTestTestTest</p>
<p>Test Test TestTestTestTestTestTestTest</p>
<p>Test Test TestTestTestTestTestTestTest</p>
<p>Test Test TestTestTestTestTestTestTest</p>CSS
.right {
float:right;
}
.hide {
display:none
}javascript
function toggle_messege(type) {
document.getElementById("div_messege").style.display = type;
document.getElementById("hreh_close").style.display = type;
}检查是否正在运行示例http://codepen.io/faishal/pen/IHEyw
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16500907
复制相关文章
相似问题