三級下拉菜單的js實(shí)現(xiàn)代碼
更新時(shí)間：2011年05月23日 21:59:39 作者：
純js實(shí)現(xiàn)的三級下拉菜單效果的代碼，需要的朋友可以參考下。
三級下拉菜單的實(shí)現(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是一個(gè)數(shù)字字符，用于區(qū)別不同的子菜單和圖片。通過document.all(name1)拿到所有的id為name1（一變量）的子菜單，這里
其實(shí)只有一個(gè)，判斷如果當(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時(shí)候，這時(shí)正是第二級菜單激活第三級菜單展開的時(shí)候，如下圖：選中論文管理，因?yàn)槌晒芾硎钦撐墓芾淼母覆藛?，成果管理不能隱藏，于是有if(idstr>12&&idstr<20)后面的代碼塊。最后的else就很好理解了，如果當(dāng)前被選中菜單展開就隱藏掉，并換掉圖標(biāo)。
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)色的正方形
}
}
}
代碼說明：只是換掉圖標(biāo)而已，表示激活或失活。
復(fù)制代碼 代碼如下:
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是一個(gè)數(shù)字字符，用于區(qū)別不同的子菜單和圖片。通過document.all(name1)拿到所有的id為name1（一變量）的子菜單，這里
其實(shí)只有一個(gè)，判斷如果當(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時(shí)候，這時(shí)正是第二級菜單激活第三級菜單展開的時(shí)候，如下圖：選中論文管理，因?yàn)槌晒芾硎钦撐墓芾淼母覆藛?，成果管理不能隱藏，于是有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)色的正方形
}
}
}
代碼說明：只是換掉圖標(biāo)而已，表示激活或失活。
您可能感興趣的文章:
- JavaScript 下拉菜單實(shí)現(xiàn)代碼
- css+js下拉菜單
- js動(dòng)態(tài)設(shè)置select下拉菜單的默認(rèn)選中項(xiàng)實(shí)例
- 一個(gè)日期下拉菜單的js實(shí)現(xiàn)代碼
- JS實(shí)多級聯(lián)動(dòng)下拉菜單類，簡單實(shí)現(xiàn)省市區(qū)聯(lián)動(dòng)菜單！
- Js點(diǎn)擊彈出下拉菜單效果實(shí)例
- JavaScript實(shí)現(xiàn)下拉菜單的顯示和隱藏
- JS中用三種方式實(shí)現(xiàn)導(dǎo)航菜單中的二級下拉菜單
- js實(shí)現(xiàn)全國省份城市級聯(lián)下拉菜單效果代碼
- javascript實(shí)現(xiàn)簡單下拉菜單效果
相關(guān)文章
最近一段時(shí)間一直比較忙，已經(jīng)有好幾個(gè)月沒有打理博客了?，F(xiàn)將一個(gè)最近在項(xiàng)目中制作的一個(gè)菜單實(shí)例整理出來，共享一下。2010-06-06
非常不錯(cuò)的當(dāng)鼠標(biāo)放上去以后，類別將會(huì)出現(xiàn)放大的一些文字和圖片，適合一些tips消息框效果2008-12-12
Div+Js實(shí)現(xiàn)的帶陰影菜單 微軟以前網(wǎng)站曾用過
Div+Js實(shí)現(xiàn)的陰影菜單，微軟以前老版網(wǎng)站首頁曾用過，用以索引出Windows產(chǎn)品家族的所有產(chǎn)品，本菜單僅實(shí)現(xiàn)了一個(gè)雛形，想實(shí)現(xiàn)像微軟一樣的效果，估計(jì)還需要做不少工作。放出來的目的是供學(xué)習(xí)CSS的朋友做參考。2009-12-12
如果需要查詢數(shù)據(jù)庫,自己修改成ajax調(diào)用吧,效果會(huì)很好的.2008-08-08
前幾天做網(wǎng)站使用到二級菜單，想也沒想就在網(wǎng)上當(dāng)了幾個(gè)，不過大多都不太滿意，只有《CSS二級菜單》看上去似乎好一點(diǎn)，就使用了那個(gè)。2009-07-07
2008-01-01
用js實(shí)現(xiàn)網(wǎng)頁上模仿桌面右鍵菜單
用js實(shí)現(xiàn)網(wǎng)頁上模仿桌面右鍵菜單...
2007-03-03 
這篇文章主要介紹了又一個(gè)漂亮的導(dǎo)航欄的下拉菜單,需要的朋友可以參考下
2007-06-06 
2008-05-05