三級下拉式功能表的js實現代碼

來源:互聯網
上載者:User

三級下拉式功能表的實現:
複製代碼 代碼如下:
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是一個數字字元,用於區別不同的子功能表和圖片。通過document.all(name1)拿到所有的id為name1(一變數)的子功能表,這裡
其實只有一個,判斷如果當前是隱藏狀態,則進入迴圈,又如果元素有定義(為了方便,通過i取到的有些子功能表可能是未定義的)就把所有子功能表隱藏掉(除了1級菜單,包括2、3級菜單)、換掉當前同級菜單表徵圖,最後把當前選中菜單顯示出來、換掉當前選中的表徵圖。有種特殊情況:當idstr>12&&idstr<20時候,這時正是第二級菜單啟用第三級菜單展開的時候,如:選中論文管理,因為成果管理是論文管理的父菜單,成果管理不能隱藏,於是有if(idstr>12&&idstr<20)後面的代碼塊。最後的else就很好理解了,如果當前被選中菜單展開就隱藏掉,並換掉表徵圖。
複製代碼 代碼如下:
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為藍色的正方形
}
}
}

代碼說明:只是換掉表徵圖而已,表示啟用或失活。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.