javascript 静态树菜单实现代码

更新时间：2010年12月06日 16:59:28 作者：

coding这么多年，我居然不知道有"dl"这种html标记，惭愧啊，今天偶然发现，觉得好玩，如是我为它添加了折叠功能，变成了一颗静态树.

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> .expand{ cursor:pointer; } .hide{ cursor:pointer; } </style> <script type="text/javascript"> function toggleChild(o) { var cls = o.getAttribute("class"); if (cls == "expand") { var sb = o.nextSibling; if (window.innerWidth) sb = sb.nextSibling; while (sb != null && sb.tagName.toLowerCase() == 'dd') { sb.style.display = "none"; sb = sb.nextSibling; if (window.innerWidth) sb = sb.nextSibling; } o.removeAttribute("class"); o.setAttribute("class", "hide"); if (window.innerWidth) //ff o.textContent = "田" + o.textContent.substring(1); else o.innerText = "田" + o.innerText.substring(1); } else { var sb = o.nextSibling; if (window.innerWidth) sb = sb.nextSibling; while (sb != null && sb.tagName.toLowerCase() == 'dd') { sb.style.display = ""; sb = sb.nextSibling; if (window.innerWidth) sb = sb.nextSibling; } o.removeAttribute("class"); o.setAttribute("class", "expand"); if (window.innerWidth) //ff o.textContent = "曰" + o.textContent.substring(1); else o.innerText = "曰" + o.innerText.substring(1); } } function maketree(obj) { var dts = obj.getElementsByTagName('dt'); for (var i = 0; i < dts.length; i++) { dts[i].setAttribute("class", "expand"); if (window.innerWidth) //ff dts[i].textContent = "曰" + dts[i].textContent; else dts[i].innerText = "曰" + dts[i].innerText; dts[i].onclick = function() { toggleChild(this); }; } } window.onload = function() { maketree(document.getElementById("tree")); }; </script> </head> <body> <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'>超链接</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">百度新闻</a></dd> <dd><a href="http://news.sohu.com">搜狐新闻</a></dd> <dt>3.2</dt> <dd><a href="http://news.baidu.com">百度新闻</a></dd> <dd><a href="http://news.sohu.com">搜狐新闻</a></dd> </dl> </dd> </dl> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

静态树

javascript采用数组实现tab菜单切换效果
最近写了一个tab菜单,这个也算是web2.0的产物了,没什么技术含量,练练手而已.需要的朋友可以参考下
2012-12-12
鼠标滑过放大显示效果的列表
非常不错的当鼠标放上去以后，类别将会出现放大的一些文字和图片，适合一些tips消息框效果
2008-12-12
js实现的XP风格的右键菜单
js实现的XP风格的右键菜单...
2007-03-03
Div+Js实现的带阴影菜单微软以前网站曾用过
Div+Js实现的阴影菜单，微软以前老版网站首页曾用过，用以索引出Windows产品家族的所有产品，本菜单仅实现了一个雏形，想实现像微软一样的效果，估计还需要做不少工作。放出来的目的是供学习CSS的朋友做参考。
2009-12-12
CSS鼠标悬停菜单图片交换技术实现
这是一个使用了图片交换技术制作的CSS鼠标悬停菜单，也就是大家所说的鼠标经过换色，不过本例中的菜单并没有使用纯CSS来实现背景换色，这里将用一幅图片替换了背景色，因为主要是想让大家了解CSS对背景图片控制的技巧
2009-11-11
原生JS仿苹果任务栏菜单，放大效果的菜单
原生JS仿苹果任务栏菜单，具备图标放大效果的菜单，原生JavaScript自定的特效，鼠标放到菜单上就把图标放大了，类似使用了jQuery的效果，里面用到了几张菜单图片，这个那就自己下载吧。
2011-08-08
麦鸡的TAB切换功能结合了javascript和css
麦鸡的TAB切换功能结合了javascript和css...
2007-12-12
滑动门式菜单实现代码
自已写的横排的导航菜单，红色水晶风格，大家可以用啦，不过也有些地方需要高手指教啊，代码里有注释，兼容性还不错，希望一起提高吧。
2009-10-10
javascript+css 新闻显示tab 选项卡效果
跟新浪的比较像啊，tab切换效果，门户类网站用过的，大家可以看看。
2009-04-04
javascript 三级下拉选择菜单Levels对象
javascript 三级下拉选择菜单Levels对象，非常的不错，大家可以参考下。
2009-07-07