Question

只有CSS，一个人会如何显示/隐藏一个知道其ID的div？

使用jQuery，使用香草javascript会更简单，甚至更简单，但是如何仅使用CSS做到这一点？

复选框hack需要具有特定的结构才能工作

此外，我希望它仅在下一个h1之前隐藏div（如果有的话）。

label:after {
  content: " [show]";
  cursor: pointer;
  float: right;
}

p {
  display: none;
}

input[type=checkbox] {
  display: none; 
}

input[type=checkbox]:checked + div {
  display: block;
}

input[type=checkbox]:checked ~ label:after {
  content: " [hide]"
}

<h1>
  Vampires and Vegetarians 
  <label for="Vampires_and_Vegetarians"></label>
</h1>
<input type="checkbox" id="Vampires_and_Vegetarians">
<div id="Vampires_and_Vegetarians">
  <p>Content for Vampires and Vegetarians</p>
</div>

Answer 1

为了使您的复选框能够控制事情，它必须出现在dom的前面，因此我将其移到了最上方。

我还稍微更改了CSS，您先隐藏p，然后尝试显示div，现在我们先隐藏div，然后显示它。

我也将您+更改为~，因为div不是直接的兄弟姐妹。

input[type=checkbox] {
  display: none;
}

input[type=checkbox]:checked~h1 label:after {
  content: " [hide]"
}

label:after {
  content: " [show]";
  cursor: pointer;
  float: right;
}

input[type=checkbox]~div {
  display: none;
}

input[type=checkbox]:checked~div {
  display: block;
}

<section>
  <input type="checkbox" id="Vampires_and_Vegetarians">
  <h1>
    Vampires and Vegetarians
    <label for="Vampires_and_Vegetarians"></label>
  </h1>
  <div id="Vampires_and_Vegetarians">
    <p>Content for Vampires and Vegetarians</p>
  </div>
</section>
<section>
  <input type="checkbox" id="Zombies_and_Zucchini">
  <h1>
    Zombies and Zucchini
    <label for="Zombies_and_Zucchini"></label>
  </h1>
  <div id="Zombies_and_Zucchini">
    <p>Content for Zombies and Zucchini</p>
  </div>
</section>

希望您对此有所帮助
随时要求澄清。

Answer 2

您将需要在此处更改元素的层次结构，如下所示。因为~用于定位下一个同级元素而不是前一个。也不要两次使用相同的ID

label:after {
  content: " [show]";
  cursor: pointer;
  float: right;
}

.content {
  display: none;
}

input[type=checkbox] {
  display: none;
}

input[type=checkbox]:checked~.content {
  display: block;
}

input[type=checkbox]:checked~h1 label:after {
  content: " [hide]"
}

<div>
  <input type="checkbox" id="1">
  <h1>
    1
    <label for="1"></label>
  </h1>
  <div class="content">
    <p>Content for 1</p>
  </div>
</div>
<div>
  <input type="checkbox" id="2">
  <h1>
    2
    <label for="2"></label>
  </h1>
  <div class="content">
    <p>Content for 2</p>
  </div>
</div>

Answer 3

Id不能在同一页面中使用两次。读- https://css-tricks.com/the-difference-between-id-and-class/

您的代码正确，但是结构略有错误。请在下面查看我的代码段

label:after {
  content: " [show]";
  cursor: pointer;
  float: right;
}

div {
  display: none;
}

input[type=checkbox] {
  display: none; 
}

input[type=checkbox]:checked ~ label ~ div {
  display: block;
}

input[type=checkbox]:checked ~ label:after {
  content: " [hide]"
}

<input type="checkbox" id="Vampires_and_Vegetarians">
<label for="Vampires_and_Vegetarians">Vampires and Vegetarians</label>
<div><p>Content for Vampires and Vegetarians</p></div>

希望这会有所帮助：）

阅读PO COMMENT后更新

如果您有更多的div通过复选框显示和隐藏内容，   您只需要对每个div应用唯一ID 。而已。：）

请参见以下示例

label:after {
  content: " [show]";
  cursor: pointer;
  float: right;
}

section {
  display:block;
  margin-top:20px;
}

div {
  display: none;
}

input[type=checkbox] {
  display: none; 
}

input[type=checkbox]:checked ~ label ~ div {
  display: block;
}

input[type=checkbox]:checked ~ label:after {
  content: " [hide]"
}

<section>
<input type="checkbox" id="Vampires_and_Vegetarians1">
<label for="Vampires_and_Vegetarians1">Vampires and Vegetarians 1</label>
<div><p>Content for Vampires and Vegetarians 1</p></div>
</section>

<section>
<input type="checkbox" id="Vampires_and_Vegetarians2">
<label for="Vampires_and_Vegetarians2">Vampires and Vegetarians 2</label>
<div><p>This is 2nd para</p></div>
</section>

<section>
<input type="checkbox" id="Vampires_and_Vegetarians3">
<label for="Vampires_and_Vegetarians3">Vampires and Vegetarians 3</label>
<div><p>This is 3rd para</p></div>
</section>

使用CSS显示隐藏的内容（给定其ID）

3 个答案: