Javascript的实例讲解－树型目录菜单

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 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;
</script>
        </font></p>
      <div id="KB1Parent" class="parent">　　　　<a href="#" onClick="expandIt('KB1'); return false" ><img src="http://goshyboy.com/js/img/plus.gif" border=0>文件夹一</a></div>
      <div id="KB1Child" class="child">　　　　　<a href="../../sample.htm" target="_blank" ><img src="http://goshyboy.com/js/img/spacer.gif" border=0 alt=""><img src="http://goshyboy.com/js/img/open.gif" border=0>页面一</a><br>
        　　　　　<a href="../../sample.htm" target="_blank" ><img src="http://goshyboy.com/js/img/spacer.gif" border=0 alt="" width="15" height="11"><img src="http://goshyboy.com/js/img/open.gif" border=0>页面二</a><br>
        　　　　　<a href="../../sample.htm" target="_blank" ><img src="http://goshyboy.com/js/img/spacer.gif" border=0 alt="" width="15" height="11"><img src="http://goshyboy.com/js/img/open.gif" border=0>页面三</a></div>
      <div id="KB2Parent" class="parent">　　　　<a href="#" onClick="expandIt('KB2'); return false" ><img src="http://goshyboy.com/js/img/plus.gif" border=0>文件夹二</a></div>
      <div id="KB2Child" class="child">　　　　　<a href="../../sample.htm" target="_blank" ><img src="http://goshyboy.com/js/img/spacer.gif" border=0 alt="" width="15" height="11"><img src="http://goshyboy.com/js/img/open.gif" border=0>页面一</a><br>
        　　　　　<a href="../../sample.htm" target="_blank" ><img src="http://goshyboy.com/js/img/spacer.gif" border=0 alt=""><img src="http://goshyboy.com/js/img/open.gif" border=0>页面二</a><br>
        　　　　　<a href="../../sample.htm" target="_blank" ><img src="http://goshyboy.com/js/img/spacer.gif" border=0 alt="" width="15" height="11"><img src="http://goshyboy.com/js/img/open.gif" border=0>页面三</a></div>
      <div id="KB3Parent" class="parent">　　　　<a href="#" onClick="expandIt('KB3'); return false" ><img src="http://goshyboy.com/js/img/plus.gif" border=0>文件夹三</a></div>
      <div id="KB3Child" class="child"> 　　　　　<a href="../../sample.htm" target="_blank" ><img src="http://goshyboy.com/js/img/spacer.gif" border=0 alt=""><img src="http://goshyboy.com/js/img/open.gif" border=0>页面一</a><br>
        　　　　　　<a href="../../sample.htm" target="_blank" ><img src="http://goshyboy.com/js/img/open.gif" border=0>页面二</a><br>
        　　　　　<a href="../../sample.htm" target="_blank" ><img src="http://goshyboy.com/js/img/spacer.gif" border=0 alt=""><img src="http://goshyboy.com/js/img/open.gif" border=0>页面三</a></div>
      <script language="JavaScript">
if (NS4) {
        firstEl = "KB1Parent";
        firstInd = getIndex(firstEl);
        arrange();
}
</script>

源程序讲解：
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，先初始化一下变量。