问题是：原本要实现两级菜单的伸缩，结果伸缩不了……
代码如下：
/*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>
这是我从书上看到的一个例子，写的时候发现，貌似有问题诶，然后就来向大家求助了。