纯css折叠区域-基于checkbox

KoreyLee 发布于2019-04-23 11:44 / 2917人阅读

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

Accordion

Accordion即可折叠区域，和

标签类似，不过更灵活些。折叠区域往常多用JavaScript实现，这里就纯粹用CSS，就想法上也是异途同归。

折叠区域重在折叠两字，既然要折叠，必然要有能记录下当前折叠状态的元素存在，思来想去恰好就是这样的元素，正好两个值，并且还可以互相切换，可以符合要求。如此说来，既然有了input，也能很自然地想到了，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就好，如下：




  
古都

  
    ...

点击此查看样例

云服务器 GPU云服务器纯CSS CheckBox 表单checkbox 模拟checkbox

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1089.html

如何使用纯 CSS 制作四子连珠游戏

摘要：序言你是否想过单纯使用也可以制作一款游戏甚至可以双人对决这是一篇非常有趣的文章，作者详细讲解了使用纯制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法。在本文中，我将介绍使用纯制作的四子连珠游戏的关键思想。序言：你是否想过单纯使用 CSS 也可以制作一款游戏？甚至可以双人对决！这是一篇非常有趣的文章，作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问...

I_Am 2019-08-02 16:05 评论0 收藏0
如何使用纯 CSS 制作四子连珠游戏

摘要：序言你是否想过单纯使用也可以制作一款游戏甚至可以双人对决这是一篇非常有趣的文章，作者详细讲解了使用纯制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法。在本文中，我将介绍使用纯制作的四子连珠游戏的关键思想。序言：你是否想过单纯使用 CSS 也可以制作一款游戏？甚至可以双人对决！这是一篇非常有趣的文章，作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问...

waltr 2019-08-29 16:43 评论0 收藏0
纯CSS实现扁平化风格开关按钮

摘要：开关样式预览图前言最近在基于框架开发一个网站，在填写表单一项需要用户填写是否选择某一选项，本来想引用框架自带的一个按钮插件，结果在引用的时候总是出错，就找了找资源，用纯实现这个按钮开关的功能。开关样式预览图 showImg(https://segmentfault.com/img/bVyYer); 前言最近在基于bootstrap框架开发一个网站，在填写表单一项需要用户填写是否选择...

nanfeiyan 2019-08-29 10:57 评论0 收藏0
纯CSS实现扁平化风格开关按钮

摘要：开关样式预览图前言最近在基于框架开发一个网站，在填写表单一项需要用户填写是否选择某一选项，本来想引用框架自带的一个按钮插件，结果在引用的时候总是出错，就找了找资源，用纯实现这个按钮开关的功能。开关样式预览图 showImg(https://segmentfault.com/img/bVyYer); 前言最近在基于bootstrap框架开发一个网站，在填写表单一项需要用户填写是否选择...

lewinlee 2019-08-19 18:45 评论0 收藏0
纯CSS实现扁平化风格开关按钮

摘要：开关样式预览图前言最近在基于框架开发一个网站，在填写表单一项需要用户填写是否选择某一选项，本来想引用框架自带的一个按钮插件，结果在引用的时候总是出错，就找了找资源，用纯实现这个按钮开关的功能。开关样式预览图 showImg(https://segmentfault.com/img/bVyYer); 前言最近在基于bootstrap框架开发一个网站，在填写表单一项需要用户填写是否选择...

lidashuang 2019-08-01 15:26 评论0 收藏0