javascript 静态树菜单实现代码

ttx9n · 发表于 2010-12-6 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需刷新才能执行]

bp5jgbcnt · 发表于 2022-9-11 01:47:04

额风风风微风微风违法

3pjdk29w · 发表于 2022-9-28 16:52:10

加快速度很快就撒谎

do827261756 · 发表于 2022-10-10 14:48:37

啪啪啪生怕PSP怕

locopy · 发表于 2022-10-11 23:28:32

非常vbcbvcvbvcb

sykzus · 发表于 2022-10-23 02:23:52

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦

mkonji · 发表于 2023-4-2 10:07:33

抽根烟，下来看看再说

btbhs8t · 发表于 2023-6-7 02:57:09

我要金豆金豆金豆

wqpa63gz · 发表于 2023-9-8 18:39:20

看到这帖子真是高兴！

zzhxxx · 发表于 2023-9-15 03:46:31

哟哟哟哟哟以偶

账号		自动登录	找回密码
密码			立即注册

[JavaScript] javascript 静态树菜单实现代码

相关帖子