由纯 CSS 实现的 switch 开关想到的（一）

2015/02/24 | 1分钟阅读 | 更新于 2015/02/24

上一篇文章里实现了纯 CSS 的 switch 开关，利用 checked 伪元素结合 CSS 选择器来控制 <label /> 的位置，再加一点点过渡效果就可以实现一个 switch 开关。

而手风琴呢，不也是点击展开点击收起吗？在不用 JavaScript 的情况下，我是不是也可以用一个 <checkbox /> 来控制后面的 div 实现这个？

我觉得可以，所以我试了一下。

代码：

CSS 部分：

div {
  box-sizing: border-box;
}
.cards input {
  /* 清掉input的边距 */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.cards {
  width: 200px;
  min-height: 40px;
  text-align: center;
}
.cards span {
  display: block;
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #ffffff;
  position: absolute;
  display: inline;
  float: left;
  z-index: 5000;
}

.cards input {
  width: 100%;
  height: 40px;
  float: left;
  opacity: 0.3;
}
.cards label {
  display: block;
  width: 100%;
  height: 40px;
  background-color: #123456;
}
.cards div {
  width: 100%;
  height: 240px;
  background-color: #abcdef;
  display: none;
  display: block;
  height: 0px;
  transition-duration: 0.2s;
  overflow: hidden;
}
.cards input:checked + label + div {
  /* div并不是直接跟在label后面的，所以用了两次相邻兄弟选择器 */
  display: block;
  /*background-color:#ff8b8b;*/
  height: 240px;
}

HTML 部分：

<div class="cards">
  <span>Title</span>
  <input id="b1" type="checkbox" />
  <label for="b1"></label>
  <div class="contentc"></div>
</div>
<div class="cards">
  <input id="b2" type="checkbox" />
  <label for="b2"></label>
  <div class="contentc">
    <p>
      读了一些switch开关的代码，发现大家的代码差不多都是一个div套一个input后跟一个label，通过
      input:checked 选择 label 改变后者的位置，我也写了一个简化版的
    </p>
  </div>
</div>
<div class="cards">
  <input id="b3" type="checkbox" />
  <label for="b3"></label>
  <div class="contentc"></div>
</div>

效果还可以，可以实现排在一起的几页各自展开收起。

但是存在问题

只能手动收起每一页
input 和 label占据了标题的位置，没法比较合理的插入标题。

后者我想到一个办法，可以用相对定位解决，总觉得不太好。