Question

我有一些剧透，我需要在点击相应的按钮后显示剧透的内容

.spoiler {
    overflow: hidden;
}
#checker {
    display: none;
}
.toggle {
    display: block;
    overflow: hidden;
    width: 100px;
    height: 20px;
    background: #ecf0f1;
    padding: 5px;
    color: #aaa;
    border-radius: 3px;
    cursor: pointer;
    white-space: nowrap;
}
#checker:not(:checked) ~ .spoiler {
    height: 0;
}
#checker:checked ~ .toggle {
    display: none;
}
code.text {
    white-space: pre;
    font-family: monospace;
    font-size: 14px;
    white-space: normal;
}

问题在于，当我按下第一个扰流板时，始终显示第一个扰流板的内容。

<input type="checkbox" id="checker">
<label for="checker" class="toggle">show spoiler 1</label>
<div class="spoiler">
    <code class="text">Lorem ipsum dolor sit amet 1.</code>
</div>

<input type="checkbox" id="checker">
<label for="checker" class="toggle">show spoiler 2</label>
<div class="spoiler">
    <code class="text">Lorem ipsum dolor sit amet 2.</code>
</div>

<input type="checkbox" id="checker">
<label for="checker" class="toggle">show spoiler 3</label>
<div class="spoiler">
    <code class="text">Lorem ipsum dolor sit amet 3.</code>
</div>

我想为每个剧透添加一个id，但我不知道CSS是否支持这个。

<input type="checkbox" id="checker1">
<label for="checker1" class="toggle">show spoiler 1</label>
<div class="spoiler1">
    <code class="text">Lorem ipsum dolor sit amet 1.</code>
</div>

<input type="checkbox" id="checker2">
<label for="checker2" class="toggle">show spoiler 2</label>
<div class="spoiler2">
    <code class="text">Lorem ipsum dolor sit amet 2.</code>
</div>

Answer 1

只有使用css，我认为每个拥有id的人都可能是唯一的出路。

＆＃13;

.spoiler {
    overflow: hidden;
}
.checker {
    display: none;
}
.toggle {
    display: block;
    overflow: hidden;
    width: 100px;
    height: 20px;
    background: #ecf0f1;
    padding: 5px;
    color: #aaa;
    border-radius: 3px;
    cursor: pointer;
    white-space: nowrap;
}
.checker:not(:checked) + .toggle + .spoiler {
    height: 0;
}
.checker:checked + .toggle {
    display: none;
}
code.text {
    white-space: pre;
    font-family: monospace;
    font-size: 14px;
    white-space: normal;
}

＆＃13;

<input type="checkbox" id="checker1" class="checker">
<label for="checker1" class="toggle">show spoiler 1</label>
<div class="spoiler">
    <code class="text">Lorem ipsum dolor sit amet 1.</code>
</div>

<input type="checkbox" id="checker2" class="checker">
<label for="checker2" class="toggle">show spoiler 2</label>
<div class="spoiler">
    <code class="text">Lorem ipsum dolor sit amet 2.</code>
</div>

＆＃13;

主要修改（css）：

.checker:checked ~ .toggle至.checker:checked + .toggle

.checker:not(:checked) ~ .spoiler至.checker:not(:checked) + .toggle + .spoiler

如何使用CSS显示来自指定点击剧透的消息？

1 个答案: