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

点击此查看样例

纯css折叠区域-基于checkbox的更多相关文章

  1. ZH奶酪:纯CSS自定义Html中Checkbox复选框样式

    原文链接:http://www.lrxin.com/archives-683.html 首先看下效果: 点击演示地址查看实例. 首先,需要添加一段CSS隐藏所有的Checkbox复选框,之后我们会改变 ...

  2. 用纯CSS美化radio和checkbox

    Radio和checkbox需要美化吗?答案是必须的,因为设计风格一直都会变化,原生的样式百年不变肯定满足不了需求. 先看看纯CSS美化过后的radio和checkbox效果:查看. 项目地址:mag ...

  3. 纯css用图片代替checkbox和radio,无js实现方法

    html <ul id="is_offical_post_links"> <li> <label> <input type="c ...

  4. 自定义常用input表单元素一:纯css 实现自定义checkbox复选框

    最下面那个是之前写的  今天在做项目的时候发现,之前写的貌似还是有点多,起码增加的span标签可以去掉,这样保持和原生相同的结构最好的,仅仅是样式上的变化.今天把项目中的这个给更新上来.下面就直接还是 ...

  5. 转 纯CSS设置Checkbox复选框控件的样式

    Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...

  6. 使用checkbox实现纯CSS下拉框

    在这个例子中,我们会看到一个纯CSS制作的下拉框.主要是要用到了HTML元素的checkbox 和CSS3选择器,并没有用到JavaScript.例子如下: Click to Expand Link ...

  7. 【转】纯CSS设置Checkbox复选框控件的样式

    Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...

  8. 纯CSS设置Checkbox复选框控件的样式

    Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...

  9. 基于flexbox纯css框架的解析

    学CSS很好的一个方法大概是先用纯CSS来实现一个自己的框架,然后便可以在之后的使用中对一开始可能很粗糙的框架做细致的优化与改进,删除些冗余,添加些功能之类的. 当然,为了避免一开始写框架时候的时候手 ...

随机推荐

  1. 基于ASP.NET MVC 微信网页登录授权(scope为snsapi_base) 流程 上 获取OPENID

    流程图 我们需要判断是否存在OPENID  首先我们得先定义一个全局的OPENID 类似于普通账号密码登录系统的 当前登录用户ID  因为我是MVC 框架  我这里定义一个控制器基类 BaseCont ...

  2. arcEngine开发之IMapControl接口

    简介 IMapControl接口最重要的是包含IMap属性,还提供另外的属性用于:管理一般的外观显示,管理图层,加载地图文档以及跟踪在界面上显示的图形. 小知识点:一般一个接口的最新实现是 Defau ...

  3. 读《图解HTTP》有感-(确保WEB安全的HTTPS)

    写在前面 该章节分析当前使用的HTTP协议中存在的安全性问题,以及采用HTTPS协议来规避这些可能存在的缺陷 正文 1.HTTP的缺点 1.1.由于HTTP不具备加密功能,所以在通信链路上,报文是以明 ...

  4. 并发库应用之十 & 多线程数据交换Exchanger应用

    申明:用大白话来说就是用于实现两个人之间的数据交换,每个人在完成一定的事务后想与对方交换数据,第一个先拿出数据的人会一直等待第二个人,直到第二个人拿着数据到来时,才能彼此交换数据. java.util ...

  5. System.nanoTime理解

    JDK1.5之后java中的计时给出了更精确的方法:System.nanoTime(),输出的精度是纳秒级别,这个给一些性能测试提供了更准确的参考. 但是这个方法有个需要注意的地方,不能用来计算今天是 ...

  6. 初识函数库libpcap

    由于工作上的需要,最近简单学习了抓包函数库libpcap,顺便记下笔记,方便以后查看 一.libpcap简介    libpcap(Packet Capture Library),即数据包捕获函数库, ...

  7. 一个能够在Asp.Net和Asp.NetCore之间能够互相通讯的Rpc

    一.特性 1.跨平台 2.提供负载均衡算法 3.支持ZK服务协调 4.提供了JSON.BinarySerializer.还有自定义的序列化方式 5.客户端提供Socket连接池,以便于快速交互,防止类 ...

  8. config.go 源码阅读

    package main import (     "io/ioutil"     "launchpad.net/goyaml" ) // ProxyConfi ...

  9. I/O----复制文本文件

    文件 "我的青春谁做主.txt" 位于 D 盘根目录下,要求将此文件的内容复制到 C:/myPrime.txt 中. package io.day03; import java.i ...

  10. java.lang.IllegalArgumentException异常 数据库别名问题

    java.lang.IllegalArgumentException: org.hibernate.hql.internal.ast.QuerySyntaxException: Path expect ...