JavaScript菜单树

OA系统，ERP系统这样的管理自动化系统。设计者们，总喜欢将菜单放在左侧。菜单太多了，分类折叠是必然的选择。这样既可以有力于菜单模块的管理，也可以方便操作。如下的一个菜单示例：

这样的菜单，我做了一个简单的。自己写了一个TheTree的类，效果还不错，贴上样式，还是杠杠的。

详细的源码可以访问我的github：

[email protected]:YeRuGeMiMi/TheTree.git

下面是我的开发过程：

1、生成菜单

我第一步写的菜单是直接硬编码在html中：

可是，真是项目中因为权限控制的原因，是将这个菜单放在数据库中，根据权限来取得菜单树的。所以我想到了，能不能使用一个json保存菜单的数据，然后写个方法来生成菜单：

定义一个json：

然后写一个一个TheTree的对象，定义一个生成方法：

start方法：定义菜单块的初始状态，我设定的是隐藏的（一般也是这样的）。

create方法：创建节点的方法，遍历json取得值。

而后，只要根据json和菜单的div创建一个TheTree的对象就可以了：

菜单成功被创建了！

2、菜单动作

菜单的动作无非是“隐藏”，和“显示”。所以只要写个方法来控制它们的样式就可以了。

做到这里，我本以为大功告成了。结果，却还有一个问题。

3、只打开一个

菜单分类之后，我需要的是：

可是，如果我的代码只写到上面这个地步，只能这样的：

为此，我想了想，突然来一个奇思妙想！

我为TheTree添加了一个属性status：

这个属性是用来记录，当前TheTree对象是否是展开的。因此，我可以讲建立所有的TheTree对象放到一个数组中：

再建立一个方法，判断这个数组中，除了对象自己本身外的其他对象的状态：

调用这个open方法，就大功告成了！

总结：

写了一下这个类，突然发现自己对JavaScript的面向对象知识生疏了，貌似我懂得太少了。写这么一个简单的类，都问了谷歌老师十几次，哎！看来要再去学习一下JavaScript面向对象的知识。