<!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. ROS学习笔记十一：创建URDF 文件并在RVIZ中查看模型

    Unified Robot Description Format,简称为URDF(标准化机器人描述格式),是一种用于描述机器人及其部分结构.关节.自由度等的XML格式文件. 一.创建第一个URDF文件 ...

  2. 224 Basic Calculator 基本计算器

    实现一个基本的计算器来计算一个简单的字符串表达式. 字符串表达式可以包含左括号 ( ,右括号),加号+ ,减号 -,非负整数和空格 . 假定所给的表达式语句总是正确有效的. 例如: "1 + ...

  3. 关于如何读取XML文件的一个简单方法

    在平时开发系统功能的时候,我们经常会碰到一些需求需要经常性的发生变化,比如 系统版本.更新日志 等等.这个时候用一个XML文件来替代数据库,就会变的简便很多. 前段时候我也正好需要改个需求,是关于客户 ...

  4. git push代码时的'git did not exit cleanly (exit code 1)'问题解决

    在利用git管理本地发布的galleryLeftOrRight插件项目时,按照git的使用方法:先commit→master,再 push,发现提示错误git did not exit cleanly ...

  5. EditText自动弹出软键盘

    editText.requestFocus() editText.isFocusable = true editText.isFocusableInTouchMode = true val timer ...

  6. java 之冒泡排序

    冒泡排序:可以想象成煮开水,气泡在瓶底的时候是比较小的,到达水面的时候达到最大. 冒泡排序的思想:先确定是升序还是降序,这里升序为例.每两个相邻的数字进行比较,前一个数字比后面一个数字大,就将两个数字 ...

  7. vim设置默认显示行号

    vim /root/.vimrc 设置在当前登录用户根目录下,.vimrc文件本身不存在,创建后之间添加下面配置保存即可 set number

  8. Farseer.net轻量级开源框架 中级篇：SQL执行报告

    导航 目   录:Farseer.net轻量级开源框架 目录 上一篇:Farseer.net轻量级开源框架 中级篇: 数据库切换 下一篇:Farseer.net轻量级开源框架 中级篇: 探究ORM(M ...

  9. [Windows Server 2012] MySQL移机方法

    ★ 欢迎来到[护卫神·V课堂],网站地址:http://v.huweishen.com ★ 护卫神·V课堂 是护卫神旗下专业提供服务器教学视频的网站,每周更新视频. ★ 本节我们将带领大家:MySQL ...

  10. .Net中的强名称(Strong Name)

    我在CSDN上的文章, 转载与此: .Net中的强名称(Strong Name) http://blog.csdn.net/Anor/article/details/3649646