Question

我一直试图让我的链接显示并在其下面隐藏一个段落。

我只需要使用CSS即可完成此任务。段落必须在加载时隐藏，并在单击链接后显示，然后再次单击链接时再次隐藏。

我该如何做到这一点？

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

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

Answer 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”;）

Answer 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/

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

如何仅使用css </p>使用html链接切换<p>

2 个答案: