Question

我想做类似这样的事情，但是当我显示内容时，我希望折叠2保持在折叠1下面。这可能吗？我尝试以不同的方式安排代码，但它只是发疯了。：d

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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现在需要某种类型的唯一标识符。

.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，显示另一个？

2 个答案: