纯css折叠区域-基于checkbox

accordion

accordion即可折叠区域，和<details>标签类似，不过更灵活些。折叠区域往常多用javascript实现，这里就纯粹用css，就想法上也是异途同归。

折叠区域重在折叠两字，既然要折叠，必然要有能记录下当前折叠状态的元素存在，思来想去<input type="checkbox">恰好就是这样的元素，正好两个值，并且还可以互相切换，可以符合要求。如此说来，既然有了input，也能很自然地想到<label>了，label可以根据for来指向特定的input元素从而无需亲自点击它就可以修改它的状态，之后根据其状态checked来标志需要显示折叠区域，否则隐藏折叠区域。

实现的方法也不难，先设置.according-body的max-height为0，然后在checkbox为checked的状态下设置其max-height为一个足够大的值就好，如下：

.accordion-body{
  padding-left: $unit-2;
  margin-bottom: $layout-spacing;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s;
}

input:checked ~,
  &[open]{
    & .accordion-body{
      max-height: 100rem;
    }
  }

注意到这里指定的是max-height而非height，因为我们实际上并不知道折叠区域的高度，既然不知道高度，为何还需要特别指定一个max-height便是一个小技巧了。仔细再看一下.according-body的transition属性，它是可以根据max-height来实现过渡效果的，这样便实现了简单的动画，虽然看上去折叠的内容不能高于100rem是一个bug，但实际上很少会遇到需要折叠这么一大块区域的情况，因此并非什么大问题。

accordion的大体结构这样便可以了，另外就是一些辅助性的效果，比方说折叠动作的时候显示区域旁边的小图标可以转一下之类的，利用transform便可以很轻易做到：

input:checked ~,
&[open]{
  & .accordion-header{
    .icon{
      transform: rotate(90deg)
    }
  }
}

.accordion-header{
  cursor: pointer;
  display: block;
  padding: $unit-1 $unit-2;
  .icon{
    transition: transform 0.25s;
  }
}

如此一来accordion也就完成了，不过考虑也可以在details标签中添加该类，所以需要将summary标签自带的小标志取消掉，如下：

summary.accordion-header{
  &::-webkit-details-marker{
    display: none !important;
  }
}

accordion的使用便只需要添加相应的类和input就好，如下：

<div class="accordion">
<input type="checkbox" id="ac-exp0" hidden>
<label for="ac-exp0" class="accordion-header">
  <div class="icon icon-menu"></div>古都</label>
<div class="accordion-body">
  <p>
    ...
  </p>
</div>
</div>

 点击此查看样例