CSS实现折叠面板
<!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实现折叠面板的更多相关文章
- 使用CSS实现折叠面板总结
任务目的 深入理解html中radio的特性 深入理解CSS选择器以及伪元素的使用 任务描述 使用input的radio单选框特性结合CSS中的伪元素实现bootstrap中折叠面板(点击查看样例), ...
- jquery ui 常用（一）（自动完成 | 标签页 | 折叠面板 | 带图标的按钮 | 日期选择器| ）
条件,引用3个文件 jquery-ui.min.css; jquery.min.js; jquery-ui.min.js. 一.自动完成 http://www.w3cschool.cc/jqueryu ...
- Accoridion折叠面板
详细操作见代码: <!doctype html> <html> <head> <meta charset="UTF-8"> < ...
- jQuery EasyUI 折叠面板accordion的使用实例
1.对折叠面板区域 div 设置 class=”easyui-accordion” 2.在区域添加多个 div, 每个 div 就是一个面板 (每个面板一定要设置 title 属性). 3.设置面板属 ...
- 布局-EasyUI Panel 面板、EasyUI Tabs 标签页/选项卡、EasyUI Accordion 折叠面板、EasyUI Layout 布局
EasyUI Panel 面板 通过 $.fn.panel.defaults 重写默认的 defaults. 面板(panel)当做其他内容的容器使用.它是创建其他组件(比如:Layout 布局.Ta ...
- amazeui学习笔记--js插件（UI增强3）--折叠面板Collapse
amazeui学习笔记--js插件(UI增强3)--折叠面板Collapse 一.总结 注意点: 1.data-am-collapse:这个东西就是展开折叠事件 2.am-collapse(包括其下属 ...
- jquery做个折叠面板
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- （八）easyUI之Accordion折叠面板：动态面板
二.动态面板 数据库设计 函数设计:该函数用于获取某个节点的所有子节点 CREATE FUNCTION fn_getAddress_ChildList_test(rootId INT) RETURNS ...
- （七）easyUI之Accordion折叠面板：普通的静态面板
一.普通的静态面板 前台 <%@ page language="java" contentType="text/html; charset=UTF-8" ...
随机推荐
- python爬虫抓取哈尔滨天气信息（静态爬虫）
python 爬虫 爬取哈尔滨天气信息 - http://www.weather.com.cn/weather/101050101.shtml 环境: windows7 python3.4(pip i ...
- bzoj 1858: [Scoi2010]序列操作 || 洛谷 P2572
记一下:线段树占空间是$2^{ceil(log2(n))+1}$ 这个就是一个线段树区间操作题,各种标记的设置.转移都很明确,只要熟悉这类题应该说是没有什么难度的. 由于对某区间set之后该区间原先待 ...
- ACM经历与感悟合集
ACM经历与感悟合集 ACM起步要点总结(转哈工大) ACM 荣耀之路-学习方法 ACM感悟 一位ACMer过来人的心得 ACM经历总结 大学ACM的总结 ACM大牛的退役贴 各大牛退役总结帖 女生应 ...
- 题解报告：hdu 1229 还是A+B
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1229 Problem Description 读入两个小于10000的正整数A和B,计算A+B.需要注 ...
- NDK(18)eclipse 使用C++ STL
1.引用库 在Application.mk 中使用 APP_STL := stlport_static 等. APP_ABI := x86 armeabi APP_PLATFORM := androi ...
- 自己制作ssl证书
首先执行如下命令生成一个key openssl genrsa -des3 -out ssl.key 1024 然后他会要求你输入这个key文件的密码.不推荐输入.因为以后要给nginx使用.每次r ...
- 后缀数组 (Suffix Array) 学习笔记
\(\\\) 定义 介绍一些写法和数组的含义,首先要知道 字典序 . \(len\):字符串长度 \(s\):字符串数组,我们的字符串存储在 \(s[0]...s[len-1]\) 中. \(suff ...
- VS2012出现加载失败时的解决办法 win7同样适用
今天更新了WIN8系统补丁,然后就出现了大量的问题,特别是经常用的软件像VS2012 老是加载失败,还说是缺少什么包一类的,弄了好长段时间终于解决了,现在将经验分享下 工具/原料 VS2012+WIN ...
- 学习笔记 第十四章 使用CSS3动画
第14章 使用CSS3动画 [学习重点] 设计2D动画 设计3D动画 设计过渡动画 设计帧动画 能够使用CSS3动画功能设计页面特效样式 14.1 设计2D动画 CSS2D Transform表 ...
- Java集合框架源码（二）——hashSet
注:本人的源码基于JDK1.8.0,JDK的版本可以在命令行模式下通过java -version命令查看. 在前面的博文(Java集合框架源码(一)——hashMap)中我们详细讲了HashMap的原 ...