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>
<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>
