利用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 相关文章推荐
css3 box-sizing属性使用参考指南
Jan 08 HTML / CSS
结合CSS3的新特性来总结垂直居中的实现方法
May 30 HTML / CSS
浅谈CSS3 box-sizing 属性 有趣的盒模型
Apr 02 HTML / CSS
利用Canvas模仿百度贴吧客户端loading小球的方法示例
Aug 13 HTML / CSS
HTML5 Canvas概述
Aug 26 HTML / CSS
html5 利用canvas实现超级玛丽简单动画
Sep 06 HTML / CSS
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
May 08 HTML / CSS
检测浏览器对HTML5和CSS3支持度的方法
Jun 25 HTML / CSS
利用 Canvas实现绘画一个未闭合的带进度条的圆环
Jul 26 HTML / CSS
在html页面中取得session中的值的方法
Aug 11 HTML / CSS
面试必问:圣杯布局和双飞翼布局的区别
May 13 HTML / CSS
HTML中的表单元素介绍
Feb 28 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中flush()、ob_flush()、ob_end_flush()的区别介绍
2013/02/17 PHP
php.ini save_handler 修改不生效的解决办法
2014/07/22 PHP
thinkphp实现上一篇与下一篇的方法
2014/12/08 PHP
php阳历转农历优化版
2016/08/08 PHP
stripos函数知识点实例分享
2019/02/11 PHP
php ZipArchive实现多文件打包下载实例
2019/10/31 PHP
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
2009/02/17 Javascript
RGB颜色值转HTML十六进制(HEX)代码的JS函数
2009/04/25 Javascript
使用jquery插件实现图片延迟加载技术详细说明
2011/03/12 Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
2011/10/31 Javascript
JQuery 文本框回车跳到下一个文本框示例代码
2013/08/30 Javascript
jQuery圆形统计图开发实例
2015/01/04 Javascript
深入解析JavaScript的闭包机制
2015/10/20 Javascript
轮播图组件js代码
2016/08/08 Javascript
javascript iframe跨域详解
2016/10/26 Javascript
React Router基础使用
2017/01/17 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
2017/04/10 Javascript
bootstrap精简教程_动力节点Java学院整理
2017/07/14 Javascript
react-native之ART绘图方法详解
2017/08/08 Javascript
javascript 中事件冒泡和事件捕获机制的详解
2017/09/01 Javascript
JavaScript实现仿Clock ISO时钟
2018/06/29 Javascript
vue使用video.js进行视频播放功能
2019/07/18 Javascript
ionic+html5+API实现双击返回键退出应用
2019/09/17 Javascript
jquery实现抽奖功能
2020/10/22 jQuery
[01:05]DOTA2完美大师赛趣味视频之选手教你打职业
2017/11/23 DOTA
python绘制双柱形图代码实例
2017/12/14 Python
利用python对mysql表做全局模糊搜索并分页实例
2020/07/12 Python
餐饮收银员岗位职责
2014/02/07 职场文书
办公室秘书岗位职责范本
2014/02/11 职场文书
现金出纳岗位职责
2014/03/15 职场文书
主题实践活动总结
2014/05/08 职场文书
中层干部考核评语
2015/01/04 职场文书
傅雷家书读书笔记
2015/06/29 职场文书
2016年党员干部廉政承诺书
2016/03/24 职场文书
2019送给家人们的中秋节祝福语
2019/08/15 职场文书
LyScript实现绕过反调试保护的示例详解
2022/08/14 Python