我发现了< 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存在.
解决方法
基于结构(对于现代浏览器)有很多选项.
看看吧
>选择器选择器adjacent sibling selector
> selector~selector general sibling selector
>选择器选择器descendant selector
>选择器>选择器child selector
这些可以与类/ ids /伪选择器结合使用,例如：hover等,并创建一个大的选项列表.
这是一个我展示它们的小型演示：http://jsfiddle.net/gaby/8v9Yz/
