什么是最简单的方法来实现纯CSS显示/隐藏？ [英] What is the simplest way to implement pure css show/hide?

问题描述

我发现了html5的< details> 元素，这使我想要确定是否可以通过css单独实现一个简单和可重用的显示/隐藏。

I discovered the <details> element for html5, and that made me want to determine whether it was possible to implement a simple and reusable show/hide via css alone.

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

I have created a show/hide mechanism in the past for showing and hiding content by giving two elements relative positioning and one a negative z-index, and then decreasing the z-index of the front element on hover (and increasing the z-index of the back element on hover).

但是，该方法仅适用于位于同一位置的元素。有没有其他技术模拟显示/隐藏在非重叠的元素？例如

However, that method only works for elements that are in the same location. Are there other techniques for simulating show/hide on non-overlapping elements? e.g. a title that causes a section of descriptive text to display.

我希望能够将显示/隐藏应用于以下内容的简单示例代码：

Trivial example code that I would like to be able to apply a show/hide to:

<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存在。

And yes, I do know that jQuery exists.

推荐答案

有很多基于结构的选项（用于现代浏览器）。

there is a plethora of options based on the structure (for modern browsers).

查看

1. selector + selector 相邻的兄弟姐妹选择器


2. selector〜selector   一般同胞选择器


3. 选择器选择器      后代选择器


4. selector> selector 子选择器

1. selector + selector  adjacent sibling selector
2. selector ~ selector  general sibling selector
3. selector selector      descendant selector
4. selector > selector  child selector

这些可与类 / ids / 伪选择器（例如：hover 等，并创建一个大的选项列表。

These can be combined with classes / ids / pseudo-selectors like :hover etc, and create a big list of options.

这里是一个小演示我展示他们： http://jsfiddle.net/gaby/8v9Yz/

here is a small demo i made to showcase them : http://jsfiddle.net/gaby/8v9Yz/

这篇关于什么是最简单的方法来实现纯CSS显示/隐藏？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！