標籤：window tag 陰影 超連結 nload 求助 class 例子 type
問題是：原本要實現兩級菜單的伸縮，結果伸縮不了……
代碼如下：
/*CSS部分*/#navigation > ul{ list-style-type: none; margin: 0px; padding: 0px;}#navigation > ul > li { border-bottom: 1px solid #ED9F9F;}#navigation > ul > li > a { display: block; /*區塊顯示*/ padding: 5px 5px 5px 0.5em; text-decoration: none; border-left: 12px solid #711515;/*左邊的粗紅邊*/ border-right: 1px solid #711515;/*右側陰影*/}#navigation > ul > li > a:link,#navigation > ul > li > a:visited{ background-color: #c11136; color: #FFFFFF; }#navigation > ul > li > a:hover{ /*滑鼠經過時*/ background-color: #990020; /*改變背景色*/ color: #ffff00; /*改變文字顏色*/}/*二級菜單*/#navigation u li ul{ list-style-type: none; margin: 0px; padding: 0px 0px 0px 0px;}#navigation ul li ul li{ border-top: 1px solid #ED9F9F;}#navigation ul li ul li a{ display: block; padding: 3px 3px 3px 0.5em; text-decoration: none; border-left:28px solid #a71f1f; border-right: 1px solid #711515;}#navigation ul li ul li a:link,#navigation ul li ul li a:visited{ background-color: #e85070; color: #FFFFFF;}#navigation ul li ul li a:hover{ background-color: #c2425d; color: #ffff00;}/*隱藏子功能表*/#navigation ul li ul.myHide{ display: none;}/*顯示子功能表*/#navigation ul li ul.myShow{ display: block;}
/*html部分*/<!DOCTYPE html><html><head> <title>伸縮的兩級菜單</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="ssdljcd.css"> <script language="JavaScript"> window.onload = function () { var oU1 = document.getElementById("listUL"); var aLi = oU1.childNodes; var oA; for(var i=0;i<aLi;i++){ //如果子項目為Li，且這個li有子功能表ul if(aLi[i].tagName == "LI" && aLi[i].getElementsByTagName("ul").length){ oA = aLi[i].firstChild; //找到超連結 oA.onclick = change; //動態添加單機函數 } } } function change() { //通過父元素li，找到兄弟元素li var oSecondDiv = this.parentNode.getElementsByTagName("ul")[0]; //CSS交替更換來實現顯示、隱藏 if(oSecondDiv.className =="myHide") oSecondDiv.className = "myShow"; else oSecondDiv.className = "myHide"; } </script></head><body><div id="navigation"> <ul id="listUL"> <li><a href="">Home</a></li> <li><a href="">News</a> <ul class="myHide"> <li><a href="">LastestNews</a></li> <li><a href="">All News</a></li> </ul> </li> <li><a href="">Sports</a> <ul class="myHide"> <li><a href="">Basketball</a></li> <li><a href="">Football</a></li> <li><a href="">Volleyball</a></li> </ul> </li> <li><a href="">Weather</a> <ul class="myHide"> <li><a href="">Today‘s Weather</a></li> <li><a href="">Forecast</a></li> </ul> </li> <li><a href="">Contact me</a></li> </ul> </div></body></html>
這是我從書上看到的一個例子，寫的時候發現，貌似有問題誒，然後就來向大家求助了。
來個大牛幫忙看下這段代碼。關於css和html的
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
