纯CSS折叠/展开div
纯CSS折叠/展开div
提问于 2013-02-27 01:54:37
我有一个纯CSS的可折叠div，它基于使用:target伪类的其他人的代码。我正在尝试设置的是一个包含12+问题的页面，当您单击+按钮时，答案div将在下方展开。我不知道如何在这个页面上创建多个折叠的div元素，而不编写大量额外的CSS。有没有人有建议如何写这段代码，让我的CSS代码最小化？(也就是说，我不必为每个12+问题输入一堆唯一的选择器)。
我不能使用Javascript，因为这是在一个不允许JS的wordpress.com站点上。
这是我的jfiddle：http://jsfiddle.net/dmarvs/94ukA/4/
<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>/* source: http://www.ehow.com/how_12214447_make-collapsing-lists-java.html */
.FAQ {
vertical-align: top;
height:auto !important;
}
.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;
}回答 4
Stack Overflow用户
发布于 2013-04-01 19:12:01
根据您希望支持的浏览器/设备，或者您准备为不兼容的浏览器准备的内容，您可能希望检查<summary>和<detail>标记。它们就是为了这个目的。不需要css，因为折叠和显示是标签定义/格式的一部分。
我做了一个here示例
<details>
<summary>This is what you want to show before expanding</summary>
<p>This is where you put the details that are shown once expanded</p>
</details>Browser support varies.在webkit中尝试以获得最佳结果。其他浏览器可能默认显示所有解决方案。您也许可以退回到上面描述的隐藏/显示方法。
Stack Overflow用户
发布于 2016-08-12 04:39:28
@gbtimmon's answer很棒，但是太复杂了。我已经尽可能地简化了他的代码。
#answer,
#show,
#hide:target {
display: none;
}
#hide:target + #show,
#hide:target ~ #answer {
display: inherit;
}<a href="#hide" id="hide">Show</a>
<a href="#/" id="show">Hide</a>
<div id="answer"><p>Answer</p></div>
Stack Overflow用户
发布于 2013-02-27 02:16:31
您只需要迭代两个链接中的锚点。
<a href="#hide2" class="hide" id="hide2">+</a>
<a href="#show2" class="show" id="show2">-</a>请参阅此jsfiddle http://jsfiddle.net/eJX8z/
我还在FAQ电话中增加了一些保证金，以改进格式。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15095933
复制相关文章
相似问题