用JS做的簡單的可折疊的兩級樹形菜單_javascript技巧

複製代碼如下代碼：

;



正文{
背景顏色:#ffdee0;
}
#navigation {
寬度：200px;
字型系列：Arial;
}
# navigation > ul {
列表樣式類型：無；
邊距：0px;
內邊距：0px;
}
#navigation > ul > li {
border-bottomtom :1pxsolid #ED9F9F;
}
#navigation > ul>li> a{
顯示：塊；
內邊距：5px5px 5px 0.5em;
文字裝飾：無；
左邊框：12pxsolid #711515;
右邊框：1pxsolid #711515;
}
#navigation > ul>li> a：鏈接，#navigation > ul > li > a:訪問過{
背景顏色:#c11136;
顏色：#FFFFFF;
}
#navigation > ul>li> a:懸停{
背景顏色:#990020;
顏色：#ffff00 ;
}
.txt{
背景顏色：#c11136;
顏色：#FFFFFF;
內邊距：5px5px 5px 0.5em;
文字裝飾：無； >左邊框：12pxsolid #711515;
右邊框：1pxsolid #711515;
}

/* 子選單的CSS樣式*/
#igation ul li ul> -style-type:none;
邊距：0px;
內邊距：0px0px 0px 0px;
}
#navigation ul li ulli{
border-top:1pxsolid #EDF
}
#navigation ul li ulli a{
display:block;
內邊距：3px3px 3px 0.5em;
文字裝飾：無；
左邊框：28psolid #fa7 ;
右邊框：1pxsolid #711515;
}
#navigation ul li ulli a:link, #navigationul li ul lia:visited{
background-color:#e85070; #FFFFFF;
}
#navigation ul li ulli a:hover{
背景顏色:#c2425d;
顏色：#ffff00;
}
#navigation ul li ul.myHidei { /* 隱藏子選單*/
display:none;
}
#navigation ul li ul.myShow{ /* 顯示子選單*/
display:block;
} display:block;
}
-->
樣式>

window.onload=function(){
varlistUL=document.getElementById("listUL");
varolist =listUL.childNodes;
varoa=0;
for(var i = 0; i if(olist[i].tagName=="LI"&&olist[i ].getElementsByTagName("ul")[0] ){
oa=olist[i];
oa.onclick=更改；
}

}
functionchange(){
varos=this.getElementsByTagName("ul")[0];
if(os.className=="myHide")
os.className="myShow";
其他
os .className="myHide";
}
}
腳本>

首頁

新聞;

最新消息

所有新聞

體育

最新消息

所有新聞 li>

天氣;

最新消息

所有新聞

身體>