利用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 mask遮罩实现一些特效
Oct 24 HTML / CSS
纯CSS3发光分享按钮的实现教程
Sep 06 HTML / CSS
利用CSS3的transition属性实现滑动效果
Aug 05 HTML / CSS
CSS中越界问题的经典解决方案【推荐】
Apr 19 HTML / CSS
CSS3绘制六边形的简单实现
Aug 25 HTML / CSS
html5 canvas-2.用canvas制作一个猜字母的小游戏
Jan 07 HTML / CSS
Canvas实现保存图片到本地的示例代码
Jun 28 HTML / CSS
canvas 基础之图像处理的使用
Apr 10 HTML / CSS
AmazeUI在模态框中嵌入表单形成模态输入框
Aug 20 HTML / CSS
用position:sticky完美解决小程序吸顶问题的实现方法
Apr 24 HTML / CSS
CSS控制继承中的height能变为可继承吗
Jun 10 HTML / CSS
CSS实现鼠标悬浮动画特效
May 07 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 file_get_contents 函数超时的几种解决方法
2009/07/30 PHP
Yii2框架RESTful API 格式化响应,授权认证和速率限制三部分详解
2016/11/10 PHP
php之可变变量的实例详解
2017/09/12 PHP
Laravel框架中自定义模板指令总结
2017/12/17 PHP
jQuery 扩展对input的一些操作方法
2009/10/30 Javascript
浏览器解析js生成的html出现样式问题的解决方法
2012/04/16 Javascript
百度地图api应用标注地理位置信息(js版)
2013/02/01 Javascript
浅谈javascript属性onresize
2015/04/20 Javascript
深入浅析react native es6语法
2015/12/09 Javascript
微信小程序 教程之数据绑定
2016/10/18 Javascript
js实现登录框鼠标拖拽效果
2017/03/09 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
2019/10/23 Javascript
Vue中点击active并第一个默认选中功能的实现
2020/02/24 Javascript
Vue事件处理原理及过程详解
2020/03/11 Javascript
vue同个按钮控制展开和折叠同个事件操作
2020/07/29 Javascript
Vue实现摇一摇功能(兼容ios13.3以上)
2021/01/26 Vue.js
Python最基本的数据类型以及对元组的介绍
2015/04/14 Python
Python实现的彩票机选器实例
2015/06/17 Python
python+django加载静态网页模板解析
2017/12/12 Python
Python subprocess模块常见用法分析
2018/06/12 Python
对Python中内置异常层次结构详解
2018/10/18 Python
在PyCharm下打包*.py程序成.exe的方法
2018/11/29 Python
用python3读取python2的pickle数据方式
2019/12/25 Python
Python应用实现处理excel数据过程解析
2020/06/19 Python
Html5页面获取微信公众号的openid的方法
2020/05/12 HTML / CSS
Tahari ASL官方网站:高级设计师女装
2021/03/15 全球购物
网络安全方面的面试题
2016/01/07 面试题
中秋节超市促销方案
2014/01/30 职场文书
2014年幼儿园工作总结
2014/11/10 职场文书
2014年政府采购工作总结
2014/12/09 职场文书
护士个人年度总结范文
2015/02/13 职场文书
邮政营业员岗位职责
2015/04/14 职场文书
格林童话读书笔记
2015/06/30 职场文书
聘任书的格式及模板
2019/10/28 职场文书
SpringBoot2 参数管理实践之入参出参与校验的方式
2021/06/16 Java/Android
vue中this.$http.post()跨域和请求参数丢失的解决
2022/04/08 Vue.js