如何使用纯CSS技术实现一个可折叠树形菜单

html-css019

如何使用纯CSS技术实现一个可折叠树形菜单,第1张

利用伪类可以实现点击打开折叠菜单，但是再次点击收起貌似就没法实现了。跟楼下说的一样，利用:hover、:active 可以设置二级菜单的样式（如height、visibility、display）以达到展开的效果。

JavaScript Code： function Ob(o){ var o=document.getElementById(o)?document.getElementById(o):oreturn o} function Hd(o) { Ob(o).style.display="none"} function Sw(o) { Ob(o).style.display=""} function ExCls(o,a,b,n){ var o=Ob(o)for(i=0i<ni++) {o=o.parentNode} o.className=o.className==a?b:a} function CNLTreeMenu(id,TagName0) { this.id=idthis.TagName0=TagName0==""?"li":TagName0this.AllNodes = Ob(this.id).getElementsByTagName(TagName0)this.InitCss = function (ClassName0,ClassName1,ClassName2,ImgUrl) { this.ClassName0=ClassName0this.ClassName1=ClassName1this.ClassName2=ClassName2this.ImgUrl=ImgUrl || "css/s.gif"this.ImgBlankA ="<img src=\"css/s.gif\" class=\"s\" onclick=\"ExCls(this,'"+ClassName0+"','"+ClassName1+"',1)\" alt=\"展开/折叠\" />"this.ImgBlankB ="<img src=\"css/s.gif\" class=\"s\" />"for (i=0i<this.AllNodes.lengthi++ ) { this.AllNodes[i].className==""?this.AllNodes[i].className=ClassName1:""this.AllNodes[i].innerHTML=(this.AllNodes[i].className==ClassName2?this.ImgBlankB:this.ImgBlankA)+this.AllNodes[i].innerHTML} } this.SetNodes = function (n) { var sClsName=n==0?this.ClassName0:this.ClassName1for (i=0i<this.AllNodes.lengthi++ ) { this.AllNodes[i].className==this.ClassName2?"":this.AllNodes[i].className=sClsName} } } CSS Code： .CNLTreeMenu img.s {cursor:pointervertical-align:middle} .CNLTreeMenu ul {padding:0} .CNLTreeMenu li {list-style:nonepadding:0} .Closed ul {display:none} .Child img.s {background:nonecursor:default} #CNLTreeMenu1 ul {margin:0 0 0 17px} #CNLTreeMenu1 img.s {width:20pxheight:15px} #CNLTreeMenu1 .Opened img.s {background:url(skin1/opened.gif) no-repeat 0 0} #CNLTreeMenu1 .Closed img.s {background:url(skin1/closed.gif) no-repeat 0 0} #CNLTreeMenu1 .Child img.s {background:url(skin1/child.gif) no-repeat 3px 5px} #CNLTreeMenu2 ul {margin:0 0 0 17px} #CNLTreeMenu2 img.s {width:17pxheight:15px} #CNLTreeMenu2 .Opened img.s {background:url(skin2/opened.gif) no-repeat 4px 6px} #CNLTreeMenu2 .Closed img.s {background:url(skin2/closed.gif) no-repeat 3px 6px} #CNLTreeMenu2 .Child img.s {background:url(skin2/child.gif) no-repeat 3px 5px} #CNLTreeMenu3 ul {margin:0 0 0 17px} #CNLTreeMenu3 img.s {width:34pxheight:18px} #CNLTreeMenu3 .Opened img.s {background:url(skin3/opened.gif) no-repeat 0 1px} #CNLTreeMenu3 .Closed img.s {background:url(skin3/closed.gif) no-repeat 0 1px} #CNLTreeMenu3 .Child img.s {background:url(skin3/child.gif) no-repeat 13px 2px} html code: <p><!--CNLTreeMenu Start:--></p><div class="CNLTreeMenu" id="CNLTreeMenu1"><h4>CNL Tree Menu1</h4><p><a id="AllOpen_1" href="#" onclick="MyCNLTreeMenu1.SetNodes(0)Hd(this)Sw('AllClose_1')">全部展开</a><a id="AllClose_1" href="#" onclick="MyCNLTreeMenu1.SetNodes(1)Hd(this)Sw('AllOpen_1')" style="display:none">全部折叠</a></p><ul><li class="Opened"><a href=" http://www.iecn.net ">IECN.Net</a><ul><li><a href="#1">技术区</a><ul><li><a href="#">网页技术</a><ul><li class="Child"><a href="#">JavaScript</a></li><!--Child Node--><li class="Child"><a href="#">HTML/XHTML/CSS</a></li><li class="Child"><a href="#">Ajax</a></li><li class="Child"><a href="#">网页制作工具</a></li><li class="Child"><a href="#">设计/图形</a></li><li class="Child"><a href="#">Flash/多媒体</a></li><li class="Child"><a href="#">VML/Web3D</a></li></ul></li><!--Sub Node 3--><li><a href="#">Web编程</a><ul><li class="Child"><a href="#">Java</a></li><!--Child Node--><li class="Child"><a href="#">.Net</a></li><li class="Child"><a href="#">ASP/VBScript</a></li><li class="Child"><a href="#">PHP</a></li><li class="Child"><a href="#">Perl/Python</a></li><li class="Child"><a href="#">Web综合/开源</a></li></ul></li><!--Sub Node 3--><li><a href="#">数据库</a><ul><li class="Child"><a href="#">Access/SQLServer</a></li><!--Child Node--><li class="Child"><a href="#">MySQL/PostgreSQL</a></li><li class="Child"><a href="#">Oracle/DB2/Sybase</a></li></ul></li><!--Sub Node 3--><li><a href="#">服务器</a><ul><li class="Child"><a href="#">Windows/IIS</a></li><!--Child Node--><li class="Child"><a href="#">Unix/Linux/Apache</a></li><li class="Child"><a href="#">应用服务器</a></li></ul></li><!--Sub Node 3--></ul></li><!--Sub Node 2--><li><a href="#1">二级目录</a><ul><li><a href="#">三级目录</a><ul><li><a href="#">四级目录</a><ul><li><a href="#">五级目录</a><ul><li><a href="#">......</a><ul><li><a href="#">第n级目录</a><ul><li class="Child"><a href="#">叶结点1</a></li><!--Child Node--><li class="Child"><a href="#">叶结点2</a></li><li class="Child"><a href="#">叶结点3</a></li></ul></li><!--Sub Node n --></ul></li><!--Sub Node 6 --></ul></li><!--Sub Node 5 --></ul></li><!--Sub Node 4--></ul></li><!--Sub Node 3--></ul></li><!--Sub Node 2--><li><a href="#1">二级目录</a><ul><li><a href="#">三级目录</a><ul><li><a href="#">四级目录</a><ul><li><a href="#">五级目录</a><ul><li><a href="#">......</a><ul><li><a href="#">第n级目录</a><ul><li class="Child"><a href="#">叶结点1</a></li><!--Child Node--><li class="Child"><a href="#">叶结点2</a></li><li class="Child"><a href="#">叶结点3</a></li></ul></li><!--Sub Node n --></ul></li><!--Sub Node 6 --></ul></li><!--Sub Node 5 --></ul></li><!--Sub Node 4--></ul></li><!--Sub Node 3--></ul></li><!--Sub Node 2--></ul></li><!--Sub Node 1 --></ul></div><!-- CNLTreeMenu --><!--CNLTreeMenu1 End!-->

希望采纳

像css, html, JavaScript以及其它代码, 都是纯文本文件, 你所看到的折叠, 着色等功能都是编辑器实现的, 不需要特别操作, 只需要使用好的代码编辑器就可以了. visual studio code以及atom都是当今最为流行也最为出色的JavaScript/html/css编辑器. 都是免费的, 体积也都比较小. 百度直接搜索,打开官网下载即可.