<!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. Windows中句柄和ID的区别

    写在前面:这里介绍句柄 对于“句柄”,在下一直停留在一知半解的认识层面,近日在下学习Windows编程,决定趁此机会将句柄彻底搞清楚.查阅了一些网络上的资料,发现网络上的讲解大概可以分为两类:一种是以 ...

  2. _bzoj1070 [SCOI2007]修车【最小费用最大流】

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=1070 以后做网络流题目就是不能省内存... #include <cstdio> ...

  3. Android 线程池系列教程(3) 创建线程池

    Creating a Manager for Multiple Threads 上一课  下一课 1.This lesson teaches you to Define the Thread Pool ...

  4. C#中的预编译指令介绍[转]

    原文链接 1.#define和#undef 用法: #define DEBUG #undef DEBUG #define告诉编译器,我定义了一个DEBUG的一个符号,他类似一个变量,但是它没有具体的值 ...

  5. jmeter（一）工具介绍（二）

    1.Jmeter 概要描叙 jmeter 是一款专门用于功能测试和压力测试的轻量级测试开发平台.多数情况下是用作压力测试,该测试工具在阿里巴巴有着广泛的使用,估计是不要钱吧,哈哈,功能上来说,整个平台 ...

  6. 事件模型的介绍与Button的ActionListener

    事件监听: 这是个很重要的概念,也是个很重要的模型,vb,vc都是这样用,甚至后面学的web框架也在用.    现在我们可以做很多按钮了吧,但是我们的按钮按它是没反应的,现在我们来看看怎么样才能让它有 ...

  7. C#特性的介绍及应用场景

    1.特性的任务:特性就是为了支持对象添加一些自我描述的信息,不影响类封装的前提添加额外信息.如果你用这个信息,那特性就有用:如果你不需要这个信息,那么这个特性就没用. 2.特性的基类:Attribut ...

  8. Sqlmap脱库之“你的数据我所见”

    废话不多说,介绍和理论啥的网上一搜一大把,一次只为tuoku. 实战操作: 1.在网上找个index.php?id=1的站点 2.很明显看到了脱下裤子的希望,sqlmap走一把.查看数据库 3.怎么看 ...

  9. spark shuffle参数及调优建议（转）

    原文:http://www.cnblogs.com/arachis/p/Spark_Shuffle.html spark.shuffle.file.buffer 默认值:32k 参数说明:该参数用于设 ...

  10. PMP项目管理学习笔记（2）——组织、约束和干系人

    (一)组织 这里所说的组织,就是我们所说的团队组织架构. 1.组织的类型 职能型: 在这种组织中,项目团队成员总是向职能经理报告,所有事务都有职能经理全权负责. 项目经理的决策需要与职能经理确认. 项 ...