0

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

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

我怎样才能做到这一点？

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

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

4

2 回答 2

2

简短的回答：你需要 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;}

看看这个小提琴

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

于 2013-08-08T02:45:21.687 回答
0

您不必使用 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>

解释：

  1. 我们正在创建一个具有 :checked 伪选择器的复选框。这是确定是否已单击某些内容的简单方法。
  2. 我们隐藏了复选框，因为我们不想看到它。
  3. 现在您可以随意设置标签的样式。你可以让它看起来很漂亮，我让它看起来像一个传统的链接。
  4. 单击标签时，它会选中复选框。
  5. 在选中复选框时，css 中有一个相邻的兄弟选择器会隐藏相邻的段落。

此外，该站点还解释了您可以纯粹使用 css 的多种方法：http: //tympanus.net/codrops/2012/12/17/css-click-events/

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

于 2013-08-08T03:05:02.837 回答