JS实现树菜单源码for IE
来源：互联网 发布：桥梁大师软件 编辑：程序博客网 时间：2024/06/05 22:46
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="Author" content="Sheneyan"><script language="JavaScript" type="text/javascript">var ns4 = document.layers; //当用户的浏览器是Netscape 4的时候var ns6 = document.getElementById && !document.all; //当用户的浏览器是Netscape 6的时候var ie4 = document.all; //当用户的浏览器是 IE 的时候//设置坐标var mouseX=0;var mouseY=0;/*设置节点类型参数 obj 是 objectj对象 type 为对象菜单的 状态 open / close*/function setNodeType(obj,type){ var c=obj.parentNode; // 令 C 为对象obj的父节点 var s=c.getElementsByTagName("span"); //遍历 c 下面所有的span元素 ，结果是数组， //下面的这个赋值是猜的。 ||注：这个其实是json|| /* t是一个多维数组 相当于t={left,open,close} t[left]=[style,text] t[open]=[style,text] t[close]=[style,text] t[left][style]="clsLeaf" t[left][text]="." t[open][style]="clsExpand" t[open][text]="-" t[close][style]="clsCollapse" t[close][text]="+" */ var t={leaf:{style:"clsLeaf",text:"."},open:{style:"clsExpand",text:"-"},close:{style:"clsCollapse",text:"+"}} var o=null; //初始化变量 o if (s&&s[0]){ //遍历C得到的span元素存在 而且 选择第一个span 元素 o=s[0]; // 令变量 o 为遍历 c 得到第一个span 元素 } else{ // 如果遍历C之后得不到span元素 var o=document.createElement("span"); // 令 o 为新建的一个span 元素 c.insertBefore(o,obj); // insertBefore 为 DOM的方法 在 obj 对象前面插入 O ,并用C代表这个新插入的对象。 } o.innerHTML=t[type]["text"]; //设置 新插入的对象o的innerHTML 值 即设置菜单前面的 + - .等符号 o.className=t[type]["style"];//设置 新插入的对象o的class名称}//获取鼠标位置//分浏览器设置function moveToMouseLoc(e){ if(ns4||ns6){ // 非IE 浏览器 mouseX = e.pageX; mouseY = e.pageY; } else{ // IE浏览器 mouseX = event.x + document.body.scrollLeft; mouseY = event.y + document.documentElement.scrollTop; } return true;}//初始化菜单//opened:true,默认展开,false,默认收起function initNav(obj,opened){ if(ns4) document.captureEvents(Event.MOUSEMOVE); //获取鼠标的位置 document.onmousemove = moveToMouseLoc;//获取鼠标的移动事件 var nav=document.getElementById(obj); //令 nav 为对象obj var navItems=nav.getElementsByTagName("li"); // 令 navItems 为遍历 对象nav 下所有的li元素 结果为 一个数组 长度为li的个数 for (var i=0,c;c=navItems[i];i++){ //对每一个li进行循环操作 并把navItems[i] 赋值给新的变量c var t=c.getElementsByTagName("ul"); // 令 t 为遍历 c 下所有的ul元素 结果为一数组 长度为c下面的ul 的个数 var a=c.getElementsByTagName("a")[0]; // 获取c 下面 第一个链接 并赋值给 a if (t.length==0){ // 如果在t的长度为0，意味着在这个 c (LI) 下面没有ul 元素 即：没有 子菜单 setNodeType(a,"leaf") // 设置当前节点的链接的状态 为"leaf" a.onmouseout=function(){ //设置鼠标移除后的触发的事件 var tipDiv=this.parentNode.getElementsByTagName("div")[0]; //令tipDiv 为当前链接a 的父节点下第一个DIV if (tipDiv){ //如果存在 tipDiv.style.display='none'; //设置这个DIV的状态为隐藏 意味着提示信息隐藏 } }; } else{ //如果 t 的长度不为0 意味着 当前菜单下面还有子菜单 for (var j=0;j<t.length ;j++ ){ //循环操作，遍历每个子菜单 t[j].style.display='none'; // 设置当前子菜单为隐藏状态 } setNodeType(a,opened?"open":"close"); // 设置菜单的默认状态 a.onfocus=function(){this.blur();return true;}// 去掉当前选择的链接的焦点 a.onmouseup=function(){ // 当前链接收到单击事件 var t,p; p=this.parentNode; //获取当前链接的父节点 var t=p.getElementsByTagName("ul")[0]; //获取当前链接父节点下第一个ul (如果有意味着有子菜单) if (t.style.display=='none'){ //如果这个t是隐藏的 setNodeType(this,"open"); //切换状态 让他处在显示状态 t.style.display='';//确保状态处在显示状态 } else{//反操作 setNodeType(this,"close"); //如果是显示的，那么隐藏 t.style.display='none';//确保状态处在隐藏 } return false; }; //设置菜单的样式 a.onmouseover=function(){// 鼠标经过时候 var t=this.parentNode.getElementsByTagName("ul")[0];//当前链接的父节点下面的第一个ul元素 }; //设置菜单的样式 a.onmouseout=function(){ //鼠标离开的时候 var t=this.parentNode.getElementsByTagName("ul")[0];//当前链接的父节点下面的第一个ul元素 var tipDiv=this.parentNode.getElementsByTagName("div")[0];//当前链接的父节点下面的第一个div元素 (菜单的提示) if (tipDiv){//如果有这个div (即存在菜单的提示) tipDiv.style.display='none'; //隐藏菜单的提示 } }; //设置菜单提示 的样式 a.onmousemove=function(){ //鼠标经过的时候 var tipDiv=this.parentNode.getElementsByTagName("div")[0];//当前链接的父节点下面的第一个div元素 if (tipDiv){ //如果存在 with (tipDiv.style){ display='block';//div的状态处在显示状态 left=parseInt(mouseX)+"px";//提示的div 位置left 点 top=(parseInt(mouseY)+20)+"px";//提示的div 位置top 点 position='absolute';//提示的div 进行绝对定位 } } } } }}//window.onload=initNav("nav",false); // 在页面加载的时候 初始化菜单，默认收起菜单</script><style type="text/css">*,html,body{ margin: 0; padding: 0; font-size:12px; font-family:宋体;}#nav ul{ list-style: none;}#nav li{ padding: 3px 0 0 13px; }#nav img{ border:0; padding:2px 0 0 8px}#nav a{ color:#303030; text-decoration: none; padding:2px 0 0 2px;}#nav li div{ display:none; position:absolute; background:#fff; color:#777; border:solid 1px; padding:3px;}#nav li div div{display:block;position:static;padding:0;border:0;}#nav a:hover{ color:blue;}img{border:0}#nav span,span.clsExpand,span.clsCollapse {font-size:9px;color:#ccc;position:relative;display:inline;top:-1px;height:14px;border:solid 1px #ccc;margin:0 5px 0 0;padding:1px 3px!important;padding:1px 3px 0;font-weight:normal;}#nav span.clsLeaf {font-size:7px;padding:0px 2px 4px 5px!important;padding:0px 2px 3px 5px;top:-3px;} </style></head><body onload="initNav('nav',false)"><div id="nav"><ul> <li> <a href="#">子节点1(有提示)</a> <div>这是一个提示框，<br/>试试看显示效果</div> <ul> <li> <a href="#">子节点1-1(有提示)</a> <div>这是第2个提示框，<br/>试试看显示效果</div> <ul> <li> <a href="#">子节点1-1-1</a> </li> <li> <a href="#">子节点1-1-2</a> </li> </ul> </li> <li> <a href="#">子节点1-2(有提示)</a> <div>这是第3个提示框， <table border="1"> <tr> <td> 这是一个表格 </td> <td> 这是一个表格 </td> </tr> <tr> <td> 这是一个表格 </td> <td> 这是一个表格 </td> </tr> </table> <div>测试内部div</div> 试试看显示效果</div> <ul> <li> <a href="#">子节点1-2-1(有提示)</a> <div>这是第4个提示框，<br/><strong>试试看</strong>显示效果</div> <ul> <li> <a href="#">子节点1-2-1-1</a> </li> <li> <a href="#">子节点1-2-1-2(有提示)</a> <div>这是第5个提示框，<br/>试试看显示效果<img src="http://www.blueidea.com/img/common/logo.gif"/></div> <ul> <li> <a href="#">子节点1-2-1-2-1</a> </li> <li> <a href="#">子节点1-2-1-2-2(有提示)</a> <div>这是第6个提示框，<br/>试试看<h1>显示效</h1>果</div> <ul><li><a href="#">dasfds</a></li></ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </li></ul></div></body></html>
