javascript 靜態(tài)樹菜單實現(xiàn)代碼

更新時間：2010年12月06日 16:59:28 作者：

coding這么多年，我居然不知道有"dl"這種html標(biāo)記，慚愧啊，今天偶然發(fā)現(xiàn)，覺得好玩，如是我為它添加了折疊功能，變成了一顆靜態(tài)樹.

誰有興趣的話可以改成動態(tài)加載數(shù)據(jù)，或者用jquery，代碼肯定會少很多！我發(fā)現(xiàn)添加一些css，這棵樹在靜態(tài)頁面還是大有用途的！

<!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需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章: