css3可折叠式/手风琴式面板(ie8及以下不兼容)
来源:互联网 发布:网络电视机参数看哪些 编辑:程序博客网 时间:2024/05/18 03:09
原demo地址:http://www.thecssninja.com/demo/css_accordion/
ie9由于不支持css3的transition,所以面板下拉和收起的时候不是缓慢的动画效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html" charset="utf-8" /><link rel="stylesheet" type="text/css" href="_styles.css" media="screen" /><title>Accordion effect using CSS | The CSS Ninja</title></head><body><dl><dt><a href="#Section1">Section 1</a></dt><dd id="Section1"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur, ante non iaculis suscipit, massa tortor dictum massa, mattis iaculis massa odio sit amet ipsum. Integer posuere enim ac felis feugiat auctor. Ut urna dui, mollis hendrerit fermentum non, lacinia non enim. Vestibulum lacus risus, tempor vel egestas at, laoreet id tortor. Cras augue sapien, cursus in facilisis id, bibendum a enim. Curabitur semper ligula et ligula aliquet scelerisque. Nunc quis aliquet sem. Duis a rhoncus enim. Integer lacinia, mi.</p></dd><dt><a href="#Section2">Section 2</a></dt><dd id="Section2"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur, ante non iaculis suscipit, massa tortor dictum massa, mattis iaculis massa odio sit amet ipsum. Integer posuere enim ac felis feugiat auctor. Ut urna dui, mollis hendrerit fermentum non, lacinia non enim. Vestibulum lacus risus, tempor vel egestas at, laoreet id tortor. Cras augue sapien, cursus in facilisis id, bibendum a enim. Curabitur semper ligula et ligula aliquet scelerisque. Nunc quis aliquet sem. Duis a rhoncus enim. Integer lacinia, mi.</p></dd><dt><a href="#Section3">Section 3</a></dt><dd id="Section3"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur, ante non iaculis suscipit, massa tortor dictum massa, mattis iaculis massa odio sit amet ipsum. Integer posuere enim ac felis feugiat auctor. Ut urna dui, mollis hendrerit fermentum non, lacinia non enim. Vestibulum lacus risus, tempor vel egestas at, laoreet id tortor. Cras augue sapien, cursus in facilisis id, bibendum a enim. Curabitur semper ligula et ligula aliquet scelerisque. Nunc quis aliquet sem. Duis a rhoncus enim. Integer lacinia, mi.</p></dd><dt><a href="#Section4">Section 4</a></dt><dd id="Section4"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur, ante non iaculis suscipit, massa tortor dictum massa, mattis iaculis massa odio sit amet ipsum. Integer posuere enim ac felis feugiat auctor. Ut urna dui, mollis hendrerit fermentum non, lacinia non enim. Vestibulum lacus risus, tempor vel egestas at, laoreet id tortor. Cras augue sapien, cursus in facilisis id, bibendum a enim. Curabitur semper ligula et ligula aliquet scelerisque. Nunc quis aliquet sem. Duis a rhoncus enim. Integer lacinia, mi.</p></dd></dl></body></html>
_styles.css
/* Just some base styles not needed for example to function */*, html { font-family: Verdana, Arial, Helvetica, sans-serif; }body, form, ul, li, p, h1, h2, h3, h4, h5{margin: 0;padding: 0;}body { padding: 60px 0 0; background-color: #606061; }img { border: none; }p{font-size: 1em;margin: 0 0 1em 0;}html { font-size: 100%; height: 100%; /* IE hack */ }body { font-size: 0.75em; } /* Base font 12px */table { font-size: 100%; /* IE hack */ }input, select, textarea, th, td { font-size:1em; }/* CSS Accordion styles */dl{padding: 10px;min-width: 960px;}dl dt{-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;border: 1px solid #cccccc;margin: 0;}dl dt a{color: #ffffff;font-weight: bold;text-decoration: none;padding: 10px;display: block;}dl dt + dd:first-child { height: auto; }dl dd{color: #cccccc;margin: 0;overflow: hidden;transition: height 1s ease;-webkit-transition: height 1s ease;-moz-transition: height 1s ease;-o-transition: height 1s ease;}dl dd p{padding: 10px;margin: 0;}dl dd:not(:target) { height: 0; }dl dd:target { height: 6.667em; }dl a.ie:hover dd,dl a.ie:focus dd{height: auto;color: #cccccc !important;}
效果图:
0 0
- css3可折叠式/手风琴式面板(ie8及以下不兼容)
- css3糖果风格按钮(ie8及以下不兼容)
- 解决Bootstrap不兼容IE8及以下版本的问题
- css3 模拟 mac 的 菜单图标列表(兼容ie,但ie8及以下效果有差异)
- css 绘制不规则不多边形实践及各方向>箭头(可兼容到ie8)
- css后代选择器兼容IE8及IE8以下
- 部分IE8及更低版本不兼容的CSS3样式属性及部分解决方案
- IE8及以下不识别H5标签
- 鼠标经过图像变大,IE8以下不兼容
- 完美解决ie8以下不兼容h5的方法
- IE8及以下版本,兼容rgba颜色的半透明背景
- IE8兼容html5,css3
- 兼容ie8以下 rgba()用法
- selectivizr兼容ie8以下的css3伪类选择器以后得ie9hack问题
- highcharts柱状图ie8及以下显示不出来解决
- ajaxfileupload不兼容ie8
- localstorage兼容ie8以下浏览器的问题
- 兼容IE8及其以下的浏览器
- java.sql.SQLException: ORA-00907: missing right parenthesis
- progra~1
- oracle常用ASM操作命令
- PLS-00201和IMP-00013
- 深入浅出函数副作用
- css3可折叠式/手风琴式面板(ie8及以下不兼容)
- 【PAT1032】Sharing 找两单词链表的相同后缀
- 用PS从图片上找配色方案
- Bug笔记:Google Map第一次缩放位置偏移
- 业务逻辑和算法
- 起初的挑食对于孩子来说是自然反应
- myeclipse手动安装android插件(摘抄)
- Loaders
- MYSQL通过Replication双机热备份