当前位置:Gxlcms > html代码 > HTML&CSS&JS兼容树(IE,Firefox,chrome)_HTML/Xhtml_网页制作

HTML&CSS&JS兼容树(IE,Firefox,chrome)_HTML/Xhtml_网页制作

时间:2021-07-01 10:21:17 帮助过:10人阅读

WEB设计里什么是树?简单讲,点击一个链接,会展开下级目录,再点击会合上,这个就是最简单的树,如何去实现呢,也很简单,css里有一个属性display,这个可以控制内容的现实还是不显示,那么再通过js来控制css的属性即可实现,看如下代码:
顶级目录


这个就算是树的原型了,当然初始状态给他加上css的display属性,display最常用的是none和block属性
none即不显示,而block则象块类型元素一样显示,再看代码
顶级目录


如此一来,运行该页面,则只显示顶级目录,如果控制呢,则需要加入js代码
1.先获得menulist
var menulist=document.getElementById("menulist");
2.或者该对象后即可控制其CSS属性
menulist.style.display="block";
加判断
if (menulist.style.display="none")
menulist.style.display="block";
else
menulist.style.display="none";
这样最原始的树就生成了,最终代码