<details> HTML标签是专门为此目的而设计的。下面是MDN documentation的示例。当前所有浏览器都支持该标签，但不支持IE。

<details>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>

字符串

.spoiler, .spoiler2, .spoiler a, .spoiler2 a{ 
  color: black; 
  background-color: black;
}

.spoiler:hover, .spoiler:hover a {
  color: white;
}

.spoiler2:hover, .spoiler2:hover a { 
 background-color:white; 
}

个字符

类似于Disqus评论中的剧透。

.spoiler{
  background-color: gray;
  color: transparent;
  user-select: none;
}

.spoiler:hover{
  background-color: inherit;
  color: inherit;
}

个字符

我在论坛上看到过剧透（包括我自己的），它们不仅仅是背景颜色改变的文本。
它们会隐藏内容，直到您单击显示/隐藏切换按钮。
我想在默认情况下不显示的站点中添加一个分区，以节省保存空间。
https://jsfiddle.net/clarle/bY7m4/
这似乎会满足我的需求。

HTML

<div class="forum-post">
    <a href="#hide" class="hide btn" id="hide">Show spoiler</a>
    <a href="#show" class="show btn" id="show">Hide spoiler</a>
    <div class="spoiler">
      <p class="spoiler-content">People die when they are killed!</p>
    </div>
</div>

字符串

CSS

.spoiler {
  display: none;
}

.show {
  display: none;
}

.hide:target + .show {
  display: inline;
}

.hide:target {
  display: none;
}

.hide:target ~ .spoiler {
  display: inline;
}

/* Just for prettiness, not actually needed */

body {
  margin: 0;
  padding: 20px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #333333;
  background-color: #FFFFFF;
}

.btn {
  padding: 4px 12px;
  margin-bottom: 0;
  *margin-left: .3em;
  font-size: 14px;
  line-height: 20px;
  color: #333333;
  text-align: center;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  vertical-align: middle;
  cursor: pointer;
  background-color: #F5F5F5;
  *background-color: #E6E6E6;
  background-image: -moz-linear-gradient(top, #FFFFFF, #E6E6E6);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#FFFFFF), to(#E6E6E6));
  background-image: -webkit-linear-gradient(top, #FFFFFF, #E6E6E6);
  background-image: -o-linear-gradient(top, #FFFFFF, #E6E6E6);
  background-image: linear-gradient(to bottom, #FFFFFF, #E6E6E6);
  background-repeat: repeat-x;
  border: 1px solid #BBBBBB;
  *border: 0;
  border-color: #E6E6E6 #E6E6E6 #BFBFBF;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  border-bottom-color: #A2A2A2;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  *zoom: 1;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
     -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  text-decoration: none;
}

.forum-post {
  padding: 20px;
  border: 1px solid #000;
}

.spoiler-content {
  padding: 15px;
}

型