实现纯css show/hide的最简单方法是什么？

Question

我发现了<details>html5 的元素,这让我想确定是否可以通过css单独实现一个简单且可重用的show/hide.

我过去创建了一个显示/隐藏机制,通过给出两个元素相对定位和一个负z-索引来显示和隐藏内容,然后在悬停时减少前元素的z-index(并增加z-index)悬停时的后部元素).

但是,该方法仅适用于位于同一位置的元素.是否有其他技术可以模拟非重叠元素的显示/隐藏？例如,导致一段描述性文本显示的标题.

我希望能够应用show/hide的简单示例代码:

<div id='container'>
<h3 id='show-hide-trigger'>summary</h3>
<p id='show-hide-text'>Paragraph of detail text paragraph Paragraph of detail text paragraph Paragraph of detail text paragraph Paragraph of detail text paragraph</p>
</div>

是的,我知道jQuery存在.

Answer 1

基于结构(对于现代浏览器)有很多选项.

看看吧

1. selector + selector  相邻的兄弟选择器
2. selector ~ selector  一般兄弟选择器
3. selector selector      后代选择器
4. selector > selector  儿童选择器

这些可以结合班/IDS/伪选择像:hover等,营造选项的大名单.

这是一个我展示的小演示:http://jsfiddle.net/gaby/8v9Yz/