javascript 静态树菜单实现代码_导航菜单

谁有兴趣的话可以改成动态加载数据，或者用jquery，代码肯定会少很多！我发现添加一些css，这棵树在静态页面还是大有用途的！

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <style type="text/css"> .expand{ cursor:pointer; } .hide{ cursor:pointer; } </style> <h3>定义列表也能变成一棵树：</h3> <dl id="tree"> <dt>菜单1</dt> <dd>1.1 aaa</dd> <dd>1.2 bbb</dd> <dd>1.3 ccc</dd> <dt>菜单2</dt> <dd>2.1 你好</dd> <dd><a href="http://www.baidu.com" target="_blank" rel="nofollow">超链接</a></dd> <dt>菜单3</dt> <dd> <dl style="margin-top:2px; margin-bottom:2px;"> <dt>3.1</dt> <dd><a href="http://news.baidu.com" target="_blank" rel="nofollow">百度新闻</a></dd> <dd><a href="http://news.sohu.com" target="_blank" rel="nofollow">搜狐新闻</a></dd> <dt>3.2</dt> <dd><a href="http://news.baidu.com" target="_blank" rel="nofollow">百度新闻</a></dd> <dd><a href="http://news.sohu.com" target="_blank" rel="nofollow">搜狐新闻</a></dd> </dl> </dd> </dl>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]