纯 CSS 折叠/展开 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15095933/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Pure CSS collapse/expand div
提问by dmarvs
I have a pure CSS collapsable div which is based on someone else's code who uses the :targetpsuedoclass. 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).
我有一个纯 CSS 可折叠 div，它基于使用:targetpsuedoclass 的其他人的代码。我要设置的是一个包含 12 个以上问题的页面，当您单击 + 按钮时，答案 div 会在下方展开。如果不编写大量额外的 CSS，我无法弄清楚如何在此页面上制作多个可折叠的 div 元素。任何人都有关于如何编写此代码以便最小化我的 CSS 代码的建议？（即，所以我不必为 12 个以上的问题中的每一个输入一堆独特的选择器）。
I cannot use Javascript since this is going on a wordpress.com site which does not allow JS.
我无法使用 Javascript，因为这是在不允许使用 JS 的 wordpress.com 站点上进行的。
Here is my jfiddle: http://jsfiddle.net/dmarvs/94ukA/4/
这是我的 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;
}
回答by Thurstan
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.
根据您希望支持的浏览器/设备，或者您准备忍受不兼容浏览器的内容，您可能需要查看<summary>和<detail>标签。他们正是为了这个目的。完全不需要 css，因为折叠和显示是标签定义/格式的一部分。
I've made an example 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.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.
浏览器支持各不相同。在 webkit 中尝试以获得最佳结果。其他浏览器可能默认显示所有解决方案。您也许可以回退到上述隐藏/显示方法。
回答by Wernight
Using <summary>and <details>
使用<summary>和<details>
Using <summary>and <details>elements is the simplest but see browser supportas current IE is not supporting it. You can polyfillthough (most are jQuery-based). Do note that unsupported browser will simply show the expanded version of course, so that may be acceptable in some cases.
使用<summary>和<details>元素是最简单的，但请参阅浏览器支持，因为当前 IE 不支持它。您可以使用polyfill（大多数是基于 jQuery 的）。请注意，不受支持的浏览器当然只会显示扩展版本，因此在某些情况下可能是可以接受的。
/* Optional styling */
summary::-webkit-details-marker {
color: blue;
}
summary:focus {
outline-style: none;
}<details>
<summary>Summary, caption, or legend for the content</summary>
Content goes here.
</details>See also how to style the <details>element (HTML5 Doctor)(little bit tricky).
另请参阅如何设置<details>元素样式(HTML5 Doctor)（有点棘手）。
Pure CSS3
纯 CSS3
The :targetselector has a pretty good browser support, and it can be used to make a singlecollapsible element within the frame.
该:target选择有着相当不错的浏览器的支持，并且它可以被用来做单一的框架内收缩元件。
.details,
.show,
.hide:target {
display: none;
}
.hide:target + .show,
.hide:target ~ .details {
display: block;
}<div>
<a id="hide1" href="#hide1" class="hide">+ Summary goes here</a>
<a id="show1" href="#show1" class="show">- Summary goes here</a>
<div class="details">
Content goes here.
</div>
</div>
<div>
<a id="hide2" href="#hide2" class="hide">+ Summary goes here</a>
<a id="show2" href="#show2" class="show">- Summary goes here</a>
<div class="details">
Content goes here.
</div>
</div>回答by Neurotransmitter
@gbtimmon's answeris great, but way, way too complicated. I've simplified his code as much as I could.
@gbtimmon 的回答很好，但是太复杂了。我已经尽可能地简化了他的代码。
#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>回答by gbtimmon
You just need to iterate the anchors in the two links.
您只需要迭代两个链接中的锚点。
<a href="#hide2" class="hide" id="hide2">+</a>
<a href="#show2" class="show" id="show2">-</a>
See this jsfiddle http://jsfiddle.net/eJX8z/
看到这个 jsfiddle http://jsfiddle.net/eJX8z/
I also added some margin to the FAQ call to improve the format.
我还在常见问题解答电话中添加了一些余量以改进格式。
回答by Ionko Gueorguiev
Or a super simple version with barely any css :)
或者一个几乎没有任何 css 的超级简单版本:)
<style>
.faq ul li {
display:block;
float:left;
padding:5px;
}
.faq ul li div {
display:none;
}
.faq ul li div:target {
display:block;
}
</style>
<div class="faq">
<ul>
<li><a href="#question1">Question 1</a>
<div id="question1">Answer 1 </div>
</li>
<li><a href="#question2">Question 2</a>
<div id="question2">Answer 2 </div>
</li>
<li><a href="#question3">Question 3</a>
<div id="question3">Answer 3 </div>
</li>
<li><a href="#question4">Question 4</a>
<div id="question4">Answer 4 </div>
</li>
<li><a href="#question5">Question 5</a>
<div id="question5">Answer 5 </div>
</li>
<li><a href="#question6">Question 6</a>
<div id="question6">Answer 6 </div>
</li>
</ul>
</div>
