快捷導(dǎo)航

三級下拉菜單的js實現(xiàn)代碼

更新時間：2011年05月23日 21:59:39 作者：

純js實現(xiàn)的三級下拉菜單效果的代碼，需要的朋友可以參考下。

三級下拉菜單的實現(xiàn)：

 
function list(idstr){ 
var name1="subtree"+idstr; 
var name2="img"+idstr; 
var objectobj=document.all(name1); 
var imgobj=document.all(name2); 
//alert(imgobj); 
if(objectobj.style.display=="none"){ 
for(i=1;i<22;i++){ 
var name3="img"+i; 
var name="subtree"+i; 
var o=document.all(name); 
if(o!=undefined){ 
o.style.display="none"; 
var image=document.all(name3); 
//alert(image); 
image.src="<%=basePath%>admin/images/ico04.gif"; 
if(idstr>12&&idstr<20){ 
document.getElementById("subtree11").style.display=""; 
document.getElementById("img11").src="<%=basePath%>admin/images/ico03.gif"; 
} 
} 
} 
objectobj.style.display=""; 
imgobj.src="<%=basePath%>admin/images/ico03.gif"; 
} 
else{ 
objectobj.style.display="none"; 
imgobj.src="<%=basePath%>admin/images/ico04.gif"; 
} 
} 

代碼講解：如
上，idstr是一個數(shù)字字符，用于區(qū)別不同的子菜單和圖片。通過document.all(name1)拿到所有的id為name1（一變量）的子菜單，這里
其實只有一個，判斷如果當(dāng)前是隱藏狀態(tài)，則進(jìn)入循環(huán)，又如果元素有定義（為了方便，通過i取到的有些子菜單可能是未定義的）就把所有子菜單隱藏掉（除了1級菜單，包括2、3級菜單）、換掉當(dāng)前同級菜單圖標(biāo)，最后把當(dāng)前選中菜單顯示出來、換掉當(dāng)前選中的圖標(biāo)。有種特殊情況：當(dāng)idstr>12&&idstr<20時候，這時正是第二級菜單激活第三級菜單展開的時候，如下圖：選中論文管理，因為成果管理是論文管理的父菜單，成果管理不能隱藏，于是有if(idstr>12&&idstr<20)后面的代碼塊。最后的else就很好理解了，如果當(dāng)前被選中菜單展開就隱藏掉，并換掉圖標(biāo)。

復(fù)制代碼代碼如下:

 
function tupian(idt){ 
var nametu="xiaotu"+idt; 
var tp = document.getElementById(nametu); 
tp.src="<%=basePath%>admin/images/ico05.gif";//圖片ico05為白色的正方形 
for(var i=1;i<32;i++) 
{ 
var nametu2="xiaotu"+i; 
if(i!=idt*1) 
{ 
var tp2=document.getElementById('xiaotu'+i); 
if(tp2!=undefined) 
{tp2.src="<%=basePath%>admin/images/ico06.gif";}//圖片ico06為藍(lán)色的正方形 
} 
} 
} 