TA貢獻1951條經驗 獲得超3個贊
－－－－－以下是完整代碼和解釋－－－－
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，先初始化一下變量。
舉報