您的位置：寻梦网首页＞编程乐园＞JavaScript＞JavaScript 实例讲解
JavaScript 实例讲解

树 型 目 录 菜 单  
       
效 果 演 示：

　　　　　

　　　　　

　　　　文件夹一
　　　　　页面一
　　　　　页面二
　　　　　页面三
　　　　文件夹二
　　　　　页面一
　　　　　页面二
　　　　　页面三
　　　　文件夹三
　　　　　页面一
　　　　　　页面二
　　　　　页面三

　

    
 
源代码如下：



这段程序放在<body>与</body>之间

    
源程序讲解：
     

NS4 = (document.layers) ? 1 : 0;
IE4 = (document.all) ? 1 : 0;
ver4 = (NS4 || IE4) ? 1 : 0;
 声明几个变量。当用户的浏览器是IE时，变量IE4的值为1，当用户的浏览器是Netscape时，变量NS4的值为1，当用户的浏览器是IE或是Netscape时，变量ver4的值为1。
if (ver4)
{ with (document)
{write("<STYLE TYPE='text/css'>");
if (NS4) {
write(".parent{position:absolute; visibility:visible}");
write(".child {position:absolute; visibility:visible}");
write(".regular {position:absolute; visibility:visible}") }
else { write(".child {display:none}") }
write("</STYLE>");
} }		 这段代码相当于一个样式，定义各个层的位置及显示状态。
function getIndex(el)
{ ind = null;
for (i=0; i<document.layers.length; i++)
{ whichEl = document.layers[i];
if (whichEl.id == el)
{ ind = i; break; } }
return ind; }		 定义一个函数getIndex，功能是获得变量ind的值。
function arrange()
{ nextY = document.layers[firstInd].pageY +document.layers[firstInd].document.height;
for (i=firstInd+1; i<document.layers.length; i++)
{ whichEl = document.layers[i];
if (whichEl.visibility != "hide")
{ whichEl.pageY = nextY; nextY += whichEl.document.height; } } }		 定义一个函数arrange（），功能就是定义一下页面上元素的位置。当菜单打开时，页面上菜单以下的东西的位置顺序往下推，菜单合起时，菜单以下的东西自动上移。
function initIt()
{ if (!ver4) return;
if (NS4) { for (i=0; i<document.layers.length; i++)
{ whichEl = document.layers[i];
if (whichEl.id.indexOf("Child") != -1) whichEl.visibility = "hide"; }
arrange(); }
else { divColl = document.all.tags("DIV");
for (i=0; i<divColl.length; i++)
{ whichEl = divColl(i);
if (whichEl.className == "child")
whichEl.style.display = "none"; } } }		 定义函数initIt()，页面载入时，首先调用该函数。功能是初始化菜单，让页面载入时，菜单处于未打开状态。
function expandIt(el) {
if (!ver4) return;
if (IE4) { whichEl = eval(el + "Child");
if (whichEl.style.display == "none") { whichEl.style.display = "block"; }
else { whichEl.style.display = "none"; } }
else { whichEl = eval("document." + el + "Child");
if (whichEl.visibility == "hide")
{ whichEl.visibility = "show"; }
else { whichEl.visibility = "hide"; } arrange(); } }
onload = initIt;		 定义一个函数expandIt(el)。由于层的可见状态在IE浏览器和NetScape浏览器中的解释是不同的，所以要分别讨论，判断菜单的状态。如果菜单是打开的，那么当再点击时，子菜单就不可见；如果菜单是关闭状态，那么当再点击时，子菜单就可见。

<div id="KB1Parent" class="parent">
<a href="#" onClick="expandIt('KB1'); return false" >
<img src="img/plus.gif" border=0>文件夹一</a></div>
。。。
<a href="sample.htm" target="_blank" ><img src="img/spacer.gif" border=0 alt=""><img src="img/open.gif" border=0>页面三</a>

这一部分是页面上所显示的部分，包括那些形象的小“文件夹”图标，和文字。
<script language="JavaScript">
if(NS4){ firstEl = "KB1Parent";
firstInd = getIndex(firstEl);
arrange(); }
</script>		 如果用户的浏览器是NetScape，先初始化一下变量。