软件开发培训班 >> 编程开发 >> JavaScript

javascript 静态树菜单实现代码

　　本文标签：静态树

<!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>超链接</dd> 
<dt>菜单3</dt> 
<dd> 
<dl style="margin-top:2px; margin-bottom:2px;"> 
<dt>3.1</dt> 
<dd>百度新闻</dd> 
<dd>搜狐新闻</dd> 
<dt>3.2</dt> 
<dd>百度新闻</dd> 
<dd>搜狐新闻</dd> 
</dl> 
</dd> 
</dl> 
</body> 
</html>

技术文章快速查找

基于jquery 的一个progressbar widge

Javascript 多浏览器兼容性问题及解决方案

jquery高级编程的最佳实践详解

深入剖析Javascript replace函数用法

js open() 与showModalDialog()方法使用介绍

javascript事件问题

javascript动态添加表格数据行(ASP后台数据库保存例子)

你可能不知道的JavaScript的new Function()方法

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建