JavaScript NodeTree navigation bar (menu item JSON type/self-made)

Recently, I was relatively idle. I made a JavaScript NodeTree myself. There are actually a lot of similar things on the internet, and there are more functions than this. I am doing this purely for the trainer.

The icons can be customized (16X16). The menu items are completely JSON-type and easy to modify.
Interface:

Usage:
1. Copy the NodeTree-JSON.js and CSS folder to the project and reference it.
2. Reference The JQuery framework.
3. Modify the NodeTreeMenu menu item in the NodeTree-JSON.js, which is described below.Copy codeThe Code is as follows: var NodeTreeMenu = [
// Id: node ID, pId: parent node Id; 0 if no parent node exists; name: Display name; img: display icon; open: only the parent node has this attribute, whether the child node is expanded by default. file: only the child node has this attribute. The page opens after clicking
{Id: 1, pId: 0, name: "parent node 1", img: "CSS/Images/001.png", open: true },
{Id: 101, pId: 1, name: "subnode 1", img: "CSS/Images/002.png", file: "http://www.cnblogs.com/nnzfly/"} // note that the end of the last line of data must not contain a comma! Otherwise, an error is reported in IE!
]

4. Add the following code where NodeTree is to be displayed:Copy codeThe Code is as follows: <ul id = "NodeTree-JSON">
</Ul>

5. Add the following code to the page:Copy codeThe Code is as follows: <script type = "text/javascript">
$ (Function (){
NodeTree ("mainFrame ");
});
</Script> or (either ):
<Script type = "text/javascript">
Window. onload = function (){
NodeTree ("mainFrame ");
}
</Script>

In NodeTree ("mainFrame"), mainFrame is the name of the target frame. For example, in the frame on the left of the navigation bar, the name of the frame on the right is "mainFrame ".
Let's see the demo.htm code.
The source code is attached. If you are interested, you can check it out ~
Http://dl.vmall.com/c0b7wda1ps
Please click here for recommendations. Your support is my greatest motivation!