纯CSS（没有jQuery），隐藏一个div，显示另一个？

Question

我想做这样的事情，但是当我显示内容 1 时，我希望折叠 2 保持在折叠 1 的正下方。这可能吗？我试图以不同的方式安排代码，但它变得很疯狂。 :D

.collapse{
  cursor: pointer;
  display: block;
  background: #cdf;
}

.collapse + input{
  display: none; /* hide the checkboxes */
}

.collapse + input + div{
  display:none;
}

.collapse + input:checked + div{
  display:block;
}

<label class="collapse" for="_1">Collapse 1</label>
<input id="_1" type="radio" name="c1"> 
<div>Content 1</div>

<label class="collapse" for="_2">Collapse 2</label>
<input id="_2" type="radio" name="c1">
<div>Content 2</div>

Answer 1

有点棘手，但它的工作！

section {
  position: relative;
}

section > .content {
  position: absolute;
  top:100%;
  left: 0;
}

.collapse{
  cursor: pointer;
  display: block;
  background: #cdf;
}
.collapse + input{
  display: none; /* hide the checkboxes */
}
.collapse + input + div{
  display:none;
}
.collapse + input:checked + div{
  display:block;
}

<section>
  <label class="collapse" for="_1">Collapse 1</label>
  <input id="_1" type="radio" name="c1"> 
  <div class="content">Content 1</div>

  <label class="collapse" for="_2">Collapse 2</label>
  <input id="_2" type="radio" name="c1">
  <div class="content">Content 2</div>
</section>

Fiddle demo

Answer 2

您的代码确实运行良好。至于让内容显示在标签之后，这只意味着我们必须更改 HTML 顺序，这意味着我们不能使用加号（相邻兄弟选择器）。相反，我们使用通用兄弟选择器 (~) 您可以在此处阅读更多相关信息 http://www.w3schools.com/css/css_combinators.asp

这是您使用代字号的代码示例。请注意，内容 div 现在需要某种唯一标识符，例如 class.

.collapse{
cursor: pointer;
display: block;
  background: #cdf;
}
input{
  display: none; /* hide the checkboxes */
}
input ~ .content{
  display:none;
}
input#_1:checked ~ .content1, input#_2:checked ~ .content2{
  display:block;
}

<label class="collapse" for="_1">Collapse 1</label>
<input id="_1" type="radio" name="c1"> 

<label class="collapse" for="_2">Collapse 2</label>
<input id="_2" type="radio" name="c1">

<div class="content content1">Content 1</div>
<div class="content content2">Content 2</div>

纯CSS（没有jQuery），隐藏一个div，显示另一个？

Pure CSS (no jQuery), hide one div, show another?

css

show

hide

collapse