运用CSS3的checked伪类完成OL的掩藏显示信息的方式

日期:2020-12-13 类型:科技新闻 

关键词:ps网页版在线制作,静态网页制作方法,微云网页版,怎么制作一个网页,django网页模板

伴随着CSS3的公布,海外科学研究正热火朝天,但在中国也有许多人抱着IE不适用CSS3的念头,自始至终视而不见不愿去学习培训。可是历史时间告知大家,好的物品势必风靡,CSS3也终将也会取代CSS2,下面就和大伙儿共享1个用CSS3打造的可折叠树状菜单。

立即上图:


树状菜单坚信大伙儿都不容易生疏,大家1般用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:⑴4px!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:⑵2px 0 0 ⑷4px;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: ⑵2px 0 0 ⑷4px;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全是前端开发很热门的话题,她们科学研究的物品远远超出大家,但中国真实去尝试的還是很少,针对1个前端开发开发设计人员来讲是1件很悲哀的事。我觉得CSS3应当引发大家的高度重视,不可以让大家输在起跑线。让大家大伙儿1起来促进CSS3的发展趋势吧。