菜单自动展开（js实现）

iteye_8576

于 2012-02-09 12:47:59 发布

阅读量576

点赞数

分类专栏： JavaScript 文章标签： javascript ViewUI

本文链接：https://blog.youkuaiyun.com/iteye_8576/article/details/82275869

版权

JavaScript 专栏收录该内容

1 篇文章

订阅专栏


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <title>Untitled
        </title>
        <script>
        	window.onload = function() {
        		var childs = document.getElementById("container").childNodes;
        		for (var i = 0;i < childs.length;i++) {
        			if (childs[i].tagName == "LI") {
        				addEvent(childs[i]);
        			}
        		}
        	}
        	function addEvent(o) {
        		var as = o.getElementsByTagName("a");
        		as[0].onclick = function(e){
        			var theEvent = window.event || e;
        			var link = theEvent.srcElement ? theEvent.srcElement : theEvent.target;
        			var uls  = link.parentNode.childNodes;
	        		for (var i = 0;i < uls.length;i++) {
	        			if (uls[i].tagName == "UL") {
	        				if (uls[i].style.display == "none") {
	        					uls[i].style.display = "";
	        				} else {
	        					uls[i].style.display = "none";
	        				}
	        			}
	        		}
        		}
        	}
        </script>
    </head>
    <body>
        <ul id="container">
            <li>
            	<a href="#">Menu01</a>
            	<ul>
            		<li>A1</li>
            		<li>A2</li>
            	</ul>
            </li>
            <li>
            	<a href="#">Menu02</a>
            	<ul>
            		<li>B1</li>
            		<li>B2</li>
            	</ul>
            </li>
        </ul>
    </body>
</html>