无限分类js版 - 711网络

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

<!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>

对JS增加了注释.

注：JSON是一种正在网络上慢慢兴起的数据交换格式。就象AJAX并不是什么新技术一样，JSON也没有提供什么新格式，它基于ECMAScript标准中对ObjectLiteral的定义(ECMA-262, 11.1.5)，早就被javascript支持。
格式定义非常简单，就是通过一组键值对来定义一个对象。在javascript中，你可以直接将这种格式的数据赋值给一个变量，然后通过键名取值。相对于使用xml来作为数据交换格式，如果要在javascript里使用，首先需要创建一个DOMParser，然后通过DOM接口访问节点对象，非常繁琐，更不用说不同浏览器的实现中DOMParser的实现和DOM接口都有诸多不同。为什么大量的AJAX应用中宁可直接返回一个HTML片断而不是直接把XML交给javascript处理，一个主要原因就是处理XML的过程比较复杂。JSON最重要的贡献就是简化了解析数据的过程。

更多的无限分类js版请到论坛查看: http://BBS.TC711.COM

【双击滚屏】【评论】【收藏】【打印】【关闭】来源：互联网日期：2008-7-13