利用CSS3的checked伪类实现OL的隐藏显示的方法


Posted in HTML / CSS onDecember 18, 2010

利用CSS3的checked伪类实现OL的隐藏显示的方法

随着CSS3的发布,国外研究正如火如荼,但在国内还有很多人抱着IE不支持CSS3的想法,始终无动于衷不肯去学习。但是历史告诉我们,好的东西必将盛行,CSS3也终将也会替代CSS2,下面就和大家分享一个用CSS3打造的可折叠树状菜单。

直接上图:

利用CSS3的checked伪类实现OL的隐藏显示的方法
树状菜单相信大家都不会陌生,我们一般用css+JS 的方式来实现。而css3的到来,让我们摆脱JS的束缚,直接运用CSS3的“选择器“就能实现可折叠树状菜单。

整体的代码很多,就不逐句逐句讲了,只把我觉得重要的地方提出来说说吧。

Html代码:

复制代码
代码如下:

<li>
<label for="subsubfolder1">下级</label>
<input id="subsubfolder1" type="checkbox" />
<ol>
<li class="file"><a>下级</a></li>
<li>
<label for="subsubfolder2">下级</label>
<input id="subsubfolder2" type="checkbox" />
<ol>
<li class="file"><a>无限级</a></li>
<li class="file"><a>无限级</a></li>
<li class="file"><a>无限级</a></li>
<li class="file"><a>无限级</a></li>
<li class="file"><a>无限级</a></li>
<li class="file"><a>无限级</a></li>
</ol>
</li>
</ol>
</li>

实现的思路是运用checkbox的checked值来判断下级栏目是否展开,CSS3的选择器中提供了:checked 这个伪类,这个伪类提供我们,当元素拥有checked这个值的时候就执行你的CSS。(很强大是吧。有了CSS3我们会少写很多JS哦!)
复制代码
代码如下:

<label for="subsubfolder1">下级</label>
<input id="subsubfolder1" type="checkbox" />

当checkbox的拥有checked值的时候就就让OL现实出来,达到我们想要的功能。

接下来看看CSS代码吧:

复制代码
代码如下:

li input {
position:absolute;left:0;margin-left:0;opacity:0;z-index:2;cursor:pointer;height:1em;width:1em;top:0;
}
input + ol {
display:none;
}
input + ol > li {
height:0;overflow:hidden;margin-left:-14px!important;padding-left:1px;
}
li label {
cursor:pointer;display:block;padding-left:17px;background:url(toggle-small-expand.png) no-repeat 0px 1px;
}
input:checked + ol {
background:url(toggle-small.png) 44px 5px no-repeat;margin:-22px 0 0 -44px;padding:27px 0 0 80px;height:auto;display:block;
}
input:checked + ol > li {
height:auto;
}

这段代码是树状菜单的中心:
复制代码
代码如下:

input:checked + ol {
background: url(toggle-small.png) 44px 5px no-repeat;margin: -22px 0 0 -44px;padding:27px 0 0 80px;height: auto;display: block;
}

这个是讲当inoput 拥有了checked后它平级的OL拥有的样式。

查看DEMO

使用IE9以下浏览就不用看了,请使用非IE浏览器。

(想让IE6+浏览器支持也是可以滴,但是需要加JS来模拟css3属性。国外有很多牛人都写了让IE6+浏览器支持部分CSS3的JS,例如PIE)

总结:

总体来说,实现思路很简单,主要是利用CSS3的 checked 伪类来实现OL的隐藏显示。不过遗憾的是IE游览器不支持CSS3,但我们不能因为IE的不支持而放弃对CSS3的研究。在国外CSS3和HTML5都是前端很热门的话题,他们研究的东西远远超过我们,但国内真正去尝试的还是不多,对于一个前端开发人员来说是一件很可悲的事。我认为CSS3应该引起我们的重视,不能让我们输在起跑线。让我们大家一起来推动CSS3的发展吧。

HTML / CSS 相关文章推荐
html5+css3之CSS中的布局与Header的实现
Nov 21 HTML / CSS
非常漂亮的CSS3百叶窗焦点图动画
Feb 24 HTML / CSS
Css3实现无缝滚动防抖
Sep 14 HTML / CSS
使用HTML5捕捉音频与视频信息概述及实例
Aug 22 HTML / CSS
html5 touch事件实现页面上下滑动效果【附代码】
Mar 10 HTML / CSS
HTML5本地存储之Web Storage应用介绍
Jan 06 HTML / CSS
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
Jan 01 HTML / CSS
简单整理HTML5的基本特性和语法
Feb 18 HTML / CSS
HTML5移动端开发中的Viewport标签及相关CSS用法解析
Apr 15 HTML / CSS
5分钟实现Canvas鼠标跟随动画背景
Nov 18 HTML / CSS
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
Apr 08 HTML / CSS
关于flex 上下文中自动 margin的问题(完整例子)
May 20 HTML / CSS
CSS3实战第一波 让我们尽情的圆角吧
Aug 27 #HTML / CSS
彻底弄明白CSS3的Media Queries(跨平台设计)
Jul 27 #HTML / CSS
让IE6、IE7、IE8支持CSS3的脚本
Jul 20 #HTML / CSS
CSS3 伪类选择器 nth-child()说明
Jul 10 #HTML / CSS
css3 border-image使用说明
Jun 23 #HTML / CSS
HTML+CSS3 模仿Windows7 桌面效果
Jun 17 #HTML / CSS
基于css3仿造window7的开始菜单
Jun 17 #HTML / CSS
You might like
PHP数组对比函数,存在交集则返回真,否则返回假
2011/02/03 PHP
php中强制下载文件的代码(解决了IE下中文文件名乱码问题)
2011/05/09 PHP
PHP 输出URL的快捷方式示例代码
2013/09/22 PHP
php之static静态属性与静态方法实例分析
2015/07/30 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
用JS实现的一个include函数
2007/07/21 Javascript
cnblogs TagCloud基于jquery的实现代码
2010/06/11 Javascript
Jquery 数据选择插件Pickerbox使用介绍
2012/08/24 Javascript
用js实现控件的隐藏及style.visibility的使用
2013/06/14 Javascript
JavaScript对IE操作的经典代码(推荐)
2014/03/10 Javascript
jquery插件开发之实现jquery手风琴功能分享
2014/03/10 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
2014/11/23 Javascript
jQuery元素选择器用法实例
2014/12/23 Javascript
jquery仿百度经验滑动切换浏览效果
2015/04/14 Javascript
在javascript中创建对象的各种模式解析
2016/05/16 Javascript
Nodejs 发送Post请求功能(发短信验证码例子)
2017/02/09 NodeJs
nodejs前端自动化构建环境的搭建
2017/07/26 NodeJs
对于input 框限定输入值为浮点型的js代码
2017/09/25 Javascript
clipboard在vue中的使用的方法示例
2018/10/19 Javascript
在vue中使用jsx语法的使用方法
2019/09/30 Javascript
[04:41]2014DOTA2国际邀请赛 Liquid顺利突围晋级正赛
2014/07/09 DOTA
Python读取JSON数据操作实例解析
2020/05/18 Python
详解Python GUI编程之PyQt5入门到实战
2020/12/10 Python
英国高级健康和美容产品零售商:Life and Looks
2019/08/01 全球购物
美国最好的葡萄酒网上商店:Wine Library
2019/11/02 全球购物
电子信息科学专业自荐信
2014/01/30 职场文书
植树造林的宣传标语
2014/06/23 职场文书
好的促销活动方案
2014/08/21 职场文书
骨干教师事迹材料
2014/12/17 职场文书
幼儿园家长工作总结2015
2015/04/25 职场文书
违反纪律检讨书范文
2015/05/07 职场文书
奖金申请报告模板
2015/05/15 职场文书
python中的mysql数据库LIKE操作符详解
2021/07/01 MySQL
使用@Value值注入及配置文件组件扫描
2021/07/09 Java/Android
Python 数据可视化工具 Pyecharts 安装及应用
2022/04/20 Python
讨论nginx location 顺序问题
2022/05/30 Servers