可以仅使用CSS（没有JavaScript代码）隐藏和显示文本吗？ [英] Can text be hidden and shown using just CSS (no JavaScript code)?

问题描述

是否可以仅使用CSS链接显示和隐藏文本-完全不使用JavaScript？

Is it possible to show and hide text using a link with only CSS -- without using JavaScript at all?

例如：在此页面

请注意更多链接。当您单击它时，它将取消隐藏文本。这个特定的示例是JavaScript，但是我不确定是否可以使用纯CSS来完成。

Note the "More" link. When you click it, it unhides text. This particular example is JavaScript, but I am not sure if it can be done with pure CSS.

推荐答案

有 < details> 元素（尚未内置到Edge中）：

There’s the <details> element, which isn’t yet built into Edge:

<details>
  <summary>more <!-- a bad summary --></summary>
  <p>Some content</p>
</details>

我不确定跨浏览器保持一致的样式有多困难。

There’s a common checkbox hack (where the checkbox can be hidden and the label can be styled to look like anything):

有一个常见的复选框hack（可以隐藏该复选框，并且可以设置标签样式看起来像什么）：

，但并不总是（也许曾经？嗯）适合使用它；您通常可以在JavaScript无法加载时仅显示内容，并具有更多链接链接。

There’s also :target, but it’s probably even less appropriate, since it's harder to build in the closing mechanism.

还有 ：target ，但这是

#content {
  display: none;
}

#content:target {
  display: block;
}

#less {
  display: none;
}

#content:target ~ #less {
  display: block;
}

<a href="#content" id="more">More</a>
<p id="content">Lorem ipsum</p>
<a href="#" id="less">Less</a>

这篇关于可以仅使用CSS（没有JavaScript代码）隐藏和显示文本吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！