没有javascript的单个CSS剧透

Question

一个网站使用这个剧透代码：

https://codepen.io/oloman/pen/odnqy

input[id^="spoiler"] {
display: none;
}
input[id^="spoiler"]+label {
display: block;
width: 200px;
margin: 0 auto;
padding: 5px 20px;
background: #e1a;
color: #fff;
text-align: center;
font-size: 24px;
border-radius: 8px;
cursor: pointer;
transition: all .6s;
}
input[id^="spoiler"]:checked+label {
color: #333;
background: #ccc;
}
input[id^="spoiler"]~.spoiler {
width: 90%;
height: 0;
overflow: hidden;
opacity: 0;
margin: 10px auto 0;
padding: 10px;
background: #eee;
border: 1px solid #000;
border-radius: 8px;
transition: all .6s;
}
input[id^="spoiler"]:checked+label+.spoiler {
height: auto;
opacity: 1;
padding: 10px;
}

<input type="checkbox" id="spoiler" />
<label for="spoiler">Spoiler1</label>
<div class="spoiler">
Lorem ipsum dolor sit amet, Etiam congue, neque a commodo
</div>
<input type="checkbox" id="spoiler" />
<label for="spoiler">Spoiler1</label>
<div class="spoiler">
Lorem ipsum dolor sit amet, Etiam congue, neque a commodo
</div>

当只有 1 个扰流板可见时，这有效。如果有多个剧透可用，则当有人单击下一个按钮时，只有第一个在工作(打开(。

有没有办法让这个人没有javascript，只用css，也许用hasChild？不能使用不同的 ID。

我做了一个jsFiddle：

https://jsfiddle.net/swj38nmr/

Answer 1

我们可以在没有javascript的情况下使用html元素details和css关键帧来实现这种效果：

最简单的例子：

details[open] summary ~ * {
animation: spoiler 1s ease-in-out;
padding: 2rem;
background: pink;
border-radius: 1rem
}
@keyframes spoiler {
0%    {opacity: 0; background: red; border-radius: 3rem}
100%  {opacity: 1; background: pink; border-radius: 1rem}
}

<details>
<summary>
Spoiler
</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu sodales tortor, posuere mattis nunc. Integer eget sapien ullamcorper diam mollis laoreet. Praesent dignissim id urna at malesuada. Etiam id nisl vitae ante vestibulum volutpat.
</p>
</details>
<details>
<summary>
Spoiler
</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu sodales tortor, posuere mattis nunc. Integer eget sapien ullamcorper diam mollis laoreet. Praesent dignissim id urna at malesuada. Etiam id nisl vitae ante vestibulum volutpat.
</p>
</details>
<details>
<summary>
Spoiler
</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu sodales tortor, posuere mattis nunc. Integer eget sapien ullamcorper diam mollis laoreet. Praesent dignissim id urna at malesuada. Etiam id nisl vitae ante vestibulum volutpat.
</p>
</details>

在移动设备上表现良好。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details