详解用JavaScript兑现"树形菜单"效果

详解用JavaScript实现"树形菜单"效果

网页里的树形菜单有两种实现方式：一种是结合后台(JSP/Struts2等), 每次下载不同的数据来刷新页面，实现树形菜单的效果。另一种是由纯JavaScript方式来实现，在树形菜单的工作过程中，不会反复从后台重新下载页面。本文要介绍的就是用纯JavaScript来实现一个树形菜单。

1. 原理

基本原理是利用HTML Tag的innerHTML属性来实现动态效果，像<div> <span> <p>等标签都可以作为一个容器，通过控制其innerHTML来刷新显示内容。显然，其内容是由JavaScript来动态生成的。

做一个例子演示一下：

2. 构建菜单树
真正的菜单有多个菜单项，每一组都可以独立的展开、折叠，因此，仅一个变量sampleExpanded是不足以保存这么多数据的。应该一个数组，来保存每组菜单的文本和状态信息。再统一的生成一个树状展示。
定义菜单为Menu, 菜单项为MenuItem
function MenuTree(container){this.menuArray = new Array();this.count = 0;this.span = container;this.target = null;// 图标this.iconOpen = null;this.iconClosed = null;// 选中的菜单项 this.menuSelected = -1;this.menuItemSelected = -1;this.setDefaultTarget = function(target){};this.setIcon = function(urlOpen, urlClosed){};this.addMenu = function(menu){};this.getMenu = function(index){};this.expandAll = function(yes){};this.toHtml = function(){};}
我把函数实现都给去了，相信大家可以根据这个框架来实现一个全功能的菜单了。注意回调函数sampleOnClick()和界面刷新函数sampleRefreshUI()仍然是必要的，只是sampleOnClick()应该传入一个参数，表示是哪个Menu被点击了。