纯CSS折叠/展开div [英] Pure CSS collapse/expand div
问题描述
我有一个纯CSS可折叠的div是基于别人的代码,使用:target
psuedoclass。我想设置的是一个页面有12个以上的问题,当你点击+按钮,答案div扩展下面。我不知道如何使多个折叠div元素在这个页面上,没有编写一个额外的CSS。任何人都有建议如何写这个,所以我的CSS代码最小化? (即,我不必为12个以上的问题中的每一个输入一组唯一的选择器)。
I have a pure CSS collapsable div which is based on someone else's code who uses the :target
psuedoclass. What I am trying to set up is a page with 12+ questions, and when you click on the + button the answer div expands beneath. I cannot figure out how to make multiple collapsing div elements on this page without writing a ton of extra CSS. Anyone have suggestions on how to write this so my CSS code is minimized? (i.e., so i dont have to input a bunch of unique selectors for each of the 12+ questions).
我不能使用Javascript,因为这是一个wordpress。 com网站不允许JS。
I cannot use Javascript since this is going on a wordpress.com site which does not allow JS.
这里是我的jfiddle: http ://jsfiddle.net/dmarvs/94ukA/4/
Here is my 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;
}
推荐答案
您希望获得支持,或者您准备好接受不符合规范的浏览器,您可以查看< summary>
和< detail>
标签。他们正是为了这个目的。不需要css,因为折叠和显示是标签定义/格式化的一部分。
Depending on what browsers/devices you are looking to support, or what you are prepared to put up with for non-compliant browsers you may want to check out the <summary>
and <detail>
tags. They are for exactly this purpose. No css is required at all as the collapsing and showing are part of the tags definition/formatting.
我举了一个例子在这里:
<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>
浏览器支持尝试webkit以获得最佳结果。其他浏览器可能默认显示所有解决方案。您可以回退到上述隐藏/显示方法。
Browser support varies. Try in webkit for best results. Other browsers may default to showing all the solutions. You can perhaps fallback to the hide/show method described above.
这篇关于纯CSS折叠/展开div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!