首頁 >web前端 >js教程 >用JS做的簡單的可折疊的兩級樹形菜單_javascript技巧

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

WBOY
WBOY原創
2016-05-16 17:22:211073瀏覽
複製代碼如下代碼:



;

可折疊的兩層選單

正文{
背景顏色:#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>



  • 天氣;

  • 最新消息

  • 所有新聞





  • 身體>


    陳述:
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn