如何使用仅使用 css 的 html 链接切换 <p>答案

【问题标题】：How do I toggle <p> with a html link using only css如何使用仅使用 css 的 html 链接切换 <p>
【发布时间】：2013-08-09 14:53:06
【问题描述】：

我已经工作了一段时间，试图让我的链接显示并隐藏它下面的一段。

我需要仅使用 CSS 来完成此操作。该段落必须在加载时隐藏并在单击链接后显示，然后在再次单击链接时再次隐藏。

我怎样才能做到这一点？

<a …………………>My link</a>
<p>Sed ut perspiciatis unde omnis iste natus</p>

我真的很感激任何帮助..

【问题讨论】：

查看这个答案 - stackoverflow.com/questions/3660046/css-next-element
CSS 无法响应点击，不幸的是您必须使用 javascript。只能在 CSS 中悬停。
Toggle text display using pure CSS :hover pseudo-class的可能重复

标签： html css

【解决方案1】：

简短回答：您需要 javascript。

毕竟，这就是它的用途：用户交互，以及其他很酷的事情。另一方面，CSS 是面向表示的，因此它的交互功能是有限的（例如，它响应悬停动作而不是按您期望的方式单击动作）。

我想到的唯一想法是使用复选框来控制点击“状态”，并在 css 中根据该状态显示一些内容。

HTML：

<label><input type="checkbox">My link
<p>Sed ut perspiciatis unde omnis iste natus</p>
</label>

CSS：

input[type="checkbox"] {display: none;}
input[type="checkbox"] + p {display:none; margin-left:1em;}
input[type="checkbox"]:checked + p {display:block;}

Check out this Fiddle

然而，这个解决方案不是最好的跨浏览器，所以我们回到“Javascript”；）

【讨论】：

注意：IE8- 不支持 :checked，并且 IE6 不支持直接相邻的选择器 +。

【解决方案2】：

您不必使用 JavaScript 来执行此操作。您可以纯粹使用 CSS 来做到这一点。下面是一个如何做到这一点的例子：

http://jsfiddle.net/rACvb/1/

CSS

.toggle {display: block;}
.toggle-label { color: blue; text-decoration: underline; }
.toggle-label:hover {text-decoration: none; cursor: pointer; }
#Clicker {display: none;}
#Clicker:checked + .toggle {display: none;}

HTML

<label for="Clicker">Click it</label>
<input id="Clicker" class="click-detect" type="checkbox" />
<p class="toggle">
    This paragraph shows because the link hasn't been clicked. It will hide when you click the "Click It" text. Honest!    
</p>

解释：

我们正在创建一个带有 :checked 伪选择器的复选框。这是一种确定某项是否已被点击的简单方法。
我们隐藏了复选框，因为我们不想看到它。
现在您可以随意设置标签的样式。你可以让它看起来很漂亮，我让它看起来像一个传统的链接。
当点击标签时，它会选中复选框。
在选中复选框时，css 中有一个相邻的同级选择器会隐藏相邻的段落。

此外，该网站还解释了一些纯粹使用 css 的方法： http://tympanus.net/codrops/2012/12/17/css-click-events/

问题实际上是您现在依靠“黑客”来完成这项工作。最后，您必须决定是否要依靠 hack 来解决问题。如果这是你唯一能做的，那么……这就是你必须做的！

【讨论】：