JS实现树菜单源码for IE

最新推荐文章于 2024-09-09 09:35:48 发布
zlkingdom
最新推荐文章于 2024-09-09 09:35:48 发布
阅读量1.8k
点赞数
文章标签： div function border 浏览器 xhtml javascript
本文链接：https://blog.csdn.net/zlkingdom/article/details/2600885
版权
<!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.οnmοuseοut=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.οnfοcus=function(){this.blur();return true;}// 去掉当前选择的链接的焦点

       a.οnmοuseup=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.οnmοuseοver=function(){// 鼠标经过时候

         var t=this.parentNode.getElementsByTagName("ul")[0];//当前链接的父节点下面的第一个ul元素

       };

       //设置菜单的样式

       a.οnmοuseοut=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.οnmοusemοve=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.οnlοad=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 οnlοad="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>
zlkingdom
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JS实现树菜单源码for IE

var ns4 = document.layers; //当用户的浏览器是Netscape 4的时候var ns6 = document.getElementById && !document.all; //当用户的浏览器是Netscape 6的时候var ie4 = document.all; //当用户的浏览器是 IE 的时候
复制链接

扫一扫