关于树形菜单的问题
发布网友
发布时间：2022-05-14 07:11
共2个回答
懂视网
时间：2022-05-14 11:33
演示地址：
（1）http://www.cnlei.org/mycode/csstreemenu/index.html
（2）http://cnlei.iecn.net/mycode/csstreemenu/index.html
下载链接：
（1）http://www.cnlei.org/mycode/csstreemenu/csstreemenu.rar
（2）http://cnlei.iecn.net/mycode/csstreemenu/csstreemenu.rar
在第一次写的基础上改进成了无限级了，并取名为：CNL Tree Menu
1."CNL Tree Menu"为无限级树形，兼容以下版本的浏览器：IE5.0+, FF1.06+, Opera8.5+ ……
2.HTML,CSS,JavaScript代码相互分离(即数据，风格，脚本三者分离)，可应用于多种场合，易于维护修改；更换树形图标，只需要修改CSS文件.
3.通过W3C校验(XHtml1-Strict,CSS1.0).
演示地址：
（1）http://www.cnlei.org/mycode/CNLTreeMenu/Ver1.0.2/index.html
（2）http://cnlei.iecn.net/mycode/CNLTreeMenu/Ver1.0.2/index.html
下载链接：
（1）http://www.cnlei.org/mycode/CNLTreeMenu/CNLTreeMenuVer1.0.2.rar
（2）http://cnlei.iecn.net/mycode/CNLTreeMenu/CNLTreeMenuVer1.0.2.rar
热心网友
时间：2022-05-14 08:41
给你改完了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>树形菜单</title>
<style type="text/css">
<!--
.hide {
display:none
}
.show {
display:block
}
-->
</style>
<script language="javascript">
function change(){
var odiv=this.parentNode.getElementsByTagName("ul")[0];
if (odiv.className=="hide")
{odiv.className="show";//alert("s")
}
else
{odiv.className="hide";//alert("ss")
}
alert(odiv.className);
}
window.onload=function(){
var ou=document.getElementById("list");
var ol=ou.childNodes;
var oa;
for (i=0;i<ol.length;i++) { //alert(ol[i].getElementsByTagName("ul").length);
if(ol[i].getElementsByTagName("ul").length>0){
oa=ol[i].firstChild;//alert(oa.innerHTML);
oa.onclick=change;
}
}
}
</script>
</head>
<body>
<ul id="list"><li><a href="#">news</a><ul class="hide"><li><a href="#">domestic</a> </li> <li><a href="#">foreign</a></li></ul></li><li><a href="#">sports</a><ul class="show"><li><a href="#">pingpang</a></li><li><a href="#">basketball</a></li></ul></li><li><a href="#">weather</a></li></ul>
</body>
</html>
