What is a tree in WEB design? Simply put, click a link to expand the sub-directory and click "join". This is the simplest tree. How to implement it is also very simple. css has an attribute "display, this can control whether the content is actually not displayed, so you can use js to control css attributes. See the following code: & lt; div & gt; top-level directory & lt; div & gt; what is a tree in WEB design? Simply put, click a link to expand the sub-directory and click "join". This is the simplest tree. How to implement it is also very simple. css has an attribute "display, this can control whether the content is actually not displayed, so you can use js to control css attributes. See the following code:
Top-level directory
Menu 1
Menu 2
Menu 3
This is even the prototype of the tree. Of course, the display attribute of css is added to the initial state. The most common attribute of display is none and block.
None indicates that the block is not displayed, while the block is displayed as a block type element.
Top-level directory
Menu 1
Menu 2
Menu 3
In this way, only the top-level directory is displayed when you run the page. If you want to control the page, you need to add the js Code.
1. Obtain menulist first
Var menulist = document. getElementById ("menulist ");
2. You can control the CSS attributes of the object.
Menulist. style. display = "block ";
Add judgment
If (menulist. style. display = "none ")
Menulist. style. display = "block ";
Else
Menulist. style. display = "none ";
In this way, the original tree is generated, and the final code
Script
Function showmenu ()
{
Var menulist = document. getElementById ("menulist ");
If (menulist. style. display = "none ")
Menulist. style. display = "block ";
Else
Menulist. style. display = "none ";
}
Script
Click = "showmenu ();"> top-level directory
Menu 1
Menu 2
Menu 3
For a long time, I used this method to create an attribute directory. No matter how complicated the directory to be created is, this method has been tried and tested, the following figure shows the running effect of the complex tree directory on IE:
The terrible thing happened in chrome. After some information retrieval, I finally found the reason. In addition to block and none, the display still has many other attributes. The block is displayed in blocks, I used tables to deploy them above. God knows whether tables and blocks have deep hatred. Microsoft thinks it is wise to ignore their hatred. chrome is still very old to abide by standards, and firefox is the same, so there is still a problem in their explanation. How can we solve this problem:
Display also has an Attribute table-cell, that is, to render the content in the form of a table. This is exactly the case when I use the table layout. The following shows the compatibility of the three browsers:
IE6
Chrome2
Firefox3.5
