<!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. Linux的防火墙概念

    #linux的防火墙概念#因为如果你不关防火墙,很可能运行 django.nginx.mysql出错#防火墙可能会阻挡端口流量的 出口#也会阻挡外来请求的 入口 #selinux iptables f ...

  2. python的Debug调试

    先打开Shell的Debug-->Debugger调试, 然后点击程序的运行 点击Debug的step按钮查看每一步的结果

  3. WPF学习07：MVVM 预备知识之数据绑定

    MVVM是一种模式,而WPF的数据绑定机制是一种WPF内建的功能集,两者是不相关的. 但是,借助WPF各种内建功能集,如数据绑定.命令.数据模板,我们可以高效的在WPF上实现MVVM.因此,我们需要对 ...

  4. 一种结合hudson的算法自动化测试构想

    作者:朱金灿 来源:http://blog.csdn.net/clever101 有时我在思考:未来软件测试的趋势是什么?其实答案和其它行业一样简单:低技术含量的测试工作都将由机器承担,人只能干机器干 ...

  5. 4 Visual Effects 视觉效果 读书笔记 第四章

    4   Visual Effects    视觉效果        读书笔记 第四章 Well, circles and ovals are good, but how about drawing r ...

  6. html中 accept 属性

    1.HTML <input> 标签的 accept 属性 在文件上传中使用 accept 属性,本例中的输入字段可以接受 GIF 和 JPEG 两种图像: <form> < ...

  7. java 对sql格式化

    public class SqlFormat{ public static void main(String[] args){ String sql=""; sqlFormat(s ...

  8. github——团队合作

  9. [转] 随机数是骗人的，.Net、Java、C为我作证

    (转自:随机数是骗人的,.Net.Java.C为我作证 - 杨中科   原文日期:2014.05.12) 几乎所有编程语言中都提供了"生成一个随机数"的方法,也就是调用这个方法会生 ...

  10. spring-shiro 配置

    配置 <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www ...