<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>使用CSS实现折叠面板</title>

    <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<div class="container">

<input type="radio" id="item1" name="item"><label for="item1">Item1</label>

<div class="context hiddenDiv"><span>span123span css html javascript jquery angularJS nodeJS

 css html javascript jquery angularJS nodeJS css html javascript jquery angularJS nodeJS</span></div>

<input type="radio" id="item2" name="item"><label for="item2">Item2</label>

<div class="context hiddenDiv"><span>hello world hello world hello world hello world hello world hello world hello world hello world hello world

 css html javascript jquery angularJS nodeJS css html javascript jquery angularJS nodeJS css html javascript jquery angularJS nodeJS

 css html javascript jquery angularJS nodeJS css html javascript jquery angularJS nodeJS</span></div>

<input type="radio" id="item3" name="item"><label for="item3">Item3</label>

<div class="context hiddenDiv"><span>hello world hello world hello world hello world hello world hello world hello world hello world hello world

 hello world hello world hello world hello world hello world hello world hello world hello world hello world

    hello world hello world hello world hello world hello world hello world hello world hello world hello world

</span></div>

</div>

</body>

</html>
*{

    margin:;

    padding:;

}

html,body{

    width:100%;

    height:100%;

}

.container{

    width:80%;

    height:400px;

    margin:0 auto;

    margin-top:30px;

    border:1px solid #dddddd;

    border-radius:1px;

}

input{

    display:none;

}

label{

    display:block;

    background-color: #F5F5F5;

    width:99%;

    height:40px;

    margin:0 auto;

    border:1px solid #dddddd;

    border-radius:2px;

    margin-top:5px;

    line-height: 40px;

}

.context{

    width:99%;

    height:0px;

    margin:0 auto;

    border:1px solid #dddddd;

    border-radius:2px;

    visibility: hidden;

    transition:height 0.5s linear;

    -webkit-transition:height 0.5s linear;

    -moz-transition:height 0.5s linear;

    -ms-transition:height 0.5s linear;

}

input:checked + label + .context{

    visibility: visible;

    height:150px;

}

1、处理折叠和展开的动画效果时候，使用transition（过渡效果），开始隐藏div时候使用了display：none;  transition没有效果，因为视图中已经没有div的物理位置，重新block后，回流和渲染，而visbility：hidden还保留其物理位置，只需要渲染就可以，transition起作用，记得以前做东西时候，经常会遇到相似的问题，但是，可能对display先入为主，总是先想到这个小玩意去隐藏元素，display会影响transition的效果，dom元素要在视图中有位置，才能进行一系列动画效果，注意这一点。

2、处理div时候用到了兄弟选择器，经试验，可以使用多个“+”选择兄弟的兄弟等。

CSS实现折叠面板的更多相关文章

  1. 使用CSS实现折叠面板总结

    任务目的 深入理解html中radio的特性 深入理解CSS选择器以及伪元素的使用 任务描述 使用input的radio单选框特性结合CSS中的伪元素实现bootstrap中折叠面板(点击查看样例), ...

  2. jquery ui 常用（一）（自动完成 | 标签页 | 折叠面板 | 带图标的按钮 | 日期选择器| ）

    条件,引用3个文件 jquery-ui.min.css; jquery.min.js; jquery-ui.min.js. 一.自动完成 http://www.w3cschool.cc/jqueryu ...

  3. Accoridion折叠面板

    详细操作见代码: <!doctype html> <html> <head> <meta charset="UTF-8"> < ...

  4. jQuery EasyUI 折叠面板accordion的使用实例

    1.对折叠面板区域 div 设置 class=”easyui-accordion” 2.在区域添加多个 div, 每个 div 就是一个面板 (每个面板一定要设置 title 属性). 3.设置面板属 ...

  5. 布局-EasyUI Panel 面板、EasyUI Tabs 标签页/选项卡、EasyUI Accordion 折叠面板、EasyUI Layout 布局

    EasyUI Panel 面板 通过 $.fn.panel.defaults 重写默认的 defaults. 面板(panel)当做其他内容的容器使用.它是创建其他组件(比如:Layout 布局.Ta ...

  6. amazeui学习笔记--js插件（UI增强3）--折叠面板Collapse

    amazeui学习笔记--js插件(UI增强3)--折叠面板Collapse 一.总结 注意点: 1.data-am-collapse:这个东西就是展开折叠事件 2.am-collapse(包括其下属 ...

  7. jquery做个折叠面板

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. （八）easyUI之Accordion折叠面板：动态面板

    二.动态面板 数据库设计 函数设计:该函数用于获取某个节点的所有子节点 CREATE FUNCTION fn_getAddress_ChildList_test(rootId INT) RETURNS ...

  9. （七）easyUI之Accordion折叠面板：普通的静态面板

    一.普通的静态面板 前台 <%@ page language="java" contentType="text/html; charset=UTF-8" ...

随机推荐

  1. 解决上传到github报错Successfully created project 'autotest' on GitHub, but initial commit failed:

    通过IDEA上传代码到GitHub上可是有时候会碰到这样的问题. 当我们选择VCS->Import into Version Control->Share Project on GitHu ...

  2. how-to-fix-fs-re-evaluating-native-module-sources-is-not-supported-graceful

    http://stackoverflow.com/questions/37346512/how-to-fix-fs-re-evaluating-native-module-sources-is-not ...

  3. C#关于html颜色值的转化 ColorTranslator

    //颜色转换非常重要快速的转换类. ColorTranslator.FromHtml (); //从html字符串得到颜色 ColorTranslator.ToHtml();

  4. D. Arpa's weak amphitheater and Mehrdad's valuable Hoses 分组背包模板题

    http://codeforces.com/problemset/problem/742/D 并查集预处理出所有关系. 一开始的时候,我预处理所有关系后,然后选择全部的时候,另起了一个for,然后再判 ...

  5. FastDFS的简单使用

    互联网中有海量的文件,比如电商网站有海量的图片文件,视频网站有海量的视频文件,如果使用传统的模式上传文件,肯定是不可取的.因此需要使用第三方服务器来存储图片 . 一.FastDFS简介 ​ FastD ...

  6. 使用 Java 发送邮件

    在我们的应用程序中有时需要给用户发送邮件,例如激活邮件.通知邮件等等.那么如何使用 Java 来给用户发送邮件呢? 使用 java 代码发送邮件 使用工具类发送邮件 使用Spring进行整合发送邮件 ...

  7. 全志R58平台调通s5k5eya（RAW+MIPI）

    全志R58平台调通s5k5eya(RAW+MIPI) 2017/5/31 10:30 版本:V1.1 1.前期使用的是s5k5eyx的ISP的固件/tuning 文件 Y:\s5k5eya_r58_d ...

  8. .NET 之ViewState的本质

    ViewState是如何实现这些功能. 以名值对的方式来存控件的值,和Hashtable的结构类似: 跟踪那些ViewState中出现改变的值,以便对这些脏数据(dirty)进行进一步的处理: 通过序 ...

  9. tomcat 启动失败 和闪退 和 启动成功却没有页面显示

    1.解压版tomcat 将tomcat解压至英文目录下, 在系统环境变量里面配置 JAVA_HOME 和CATALINA_HOME (就是tomcat的安装目录) 在path中配置 %CATALINA ...

  10. PHP自定义函数及内部函数考察点

    变量的作用域和静态变量 变量的作用域 变量的作用域也称变量的范围,变量的范围即它定义的上下文背景(也是它的生效范围).大部分的PHP变量只有一个单独的范围.这个单独的范围跨度同样包含了include和 ...