web前端开发之二级菜单的隐藏和展开

来源：互联网发布：铆工放样软件编辑：程序博客网时间：2024/04/20 08:17
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>caidan</title><style>#navigation{width: 200px;height: 1000px;float: left;}#navigation>ul{list-style-type: none;margin: 0px;padding: 0px;}#navigation>ul>li{border-bottom: 5px soild #ED9F9F;}#navigation>ul>li>a{display: block;padding: 5px 5px 5px 0.5em;text-decoration: none;border-left: 12px soild #711515;border-left: 1px soild #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 ul 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 a:link,#navigation ul li 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;}</style><script>window.onload=function(){var oUl = document.getElementById("listUL");var aLi = oUl.childNodes;//获取所有子元素返回一个子元素节点集合包括#text节点，在DOM中，文本也是一个节点，类型为DOM Text，包含进去了每个li节点前面的文本节点"回车 "，即一个回车后面跟很多空格var oA;for(var i = 0;i<aLi.length;i++){if (aLi[i].tagName=="LI"&&aLi[i].getElementsByTagName("ul").length) {//找到同时满足标签名为li和返回带有ul标签名的对象的长度不为空的li节点oA = aLi[i].firstChild;//获得a标签oA.onclick = change;//给a标签绑定事件}}}function change(){var oSecondDiv = this.parentNode.getElementsByTagName("ul")[0];//找到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="#">Lastest News</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>
阅读全文
0 0