Making a tree-like catalogue with CSS skillfully

Css

Most Soyi electronic magazines use a tree-like directory, when the mouse clicks on the home directory, expand the subdirectory, when clicked the home directory again, close the subdirectory. It is simple, neat and unadorned. There are many ways to make this kind of tree directory, recently I use CSS to easily control the object's "display" and "hidden" attribute principle, also make a, I feel the use of CSS to make such a tree-like directory, the method is simple, the code is relatively small, so write it to the net friends, so that when the need to do one. Take a look at the following example: When the mouse in the main directory to click on the next pull out the corresponding subdirectory, and then click again to restore the original, the effect and
The catalogues on the Soyi Electronic magazine work exactly the same.
Production method:
I'll start by copying the code that produces this effect, and then combining the code to make the method:
〈div id= "main1" style= "Color:blue"
+ Home Directory 1〈/div〉
〈div id= "Child1" style= "Display:none"
〈a href= "#" 〉-subdirectory 1〈/a〉〈br〉
〈a href= "#" 〉-subdirectory 2〈/a〉〈br〉
〈a href= "#" 〉-subdirectory 3〈/a〉〈br〉
〈a href= "#" 〉-subdirectory 4〈/a〉
〈/div〉
〈div id= "main2" style= "Color:blue"
+ Home Directory 2〈/div〉
〈div id= "child2" style= "Display:none"
〈a href= "#" 〉-subdirectory 1〈/a〉〈br〉
〈a href= "#" 〉-subdirectory 2〈/a〉〈br〉
〈a href= "#" 〉-subdirectory 3〈/a〉
〈/div〉
Note: "" denotes a character spaces
1, first define two Div, one for the home directory, named: Main1; another for the corresponding subdirectory, named: Child1. 2, written in the div of main1
"+ Home directory 1" and load a mouse click event on it: OnClick and a small JavaScript program: document.all.child1.style.display= ( Document.all.child1.style.display = ' none ')? ': ' None '. The function of this program is that when the mouse clicks on a main1 div (that is, on "+ Home Directory 1"), if the child1 div is hidden, let it show;
3, in the Child1 div write subdirectory, and set it as a hyperlink, I in the above example is set up an empty link, the actual production when it changed to real link, so that it points to the link target. Add a css:style= "Display:none" to the child1 div definition to make the subdirectory initially hidden.
The production of other catalogs is just a repeat of the three steps above. You can see the effect by pressing F12. This approach is mainly to use the CSS Display properties: Display, it has a feature is that when the object is hidden, the object occupied by the page space will automatically give up. We know that CSS also has a property: Visibility also has the ability to display and hide objects, but it cannot be used to make tree-like directories above. Because visibility hides the object, the space occupied by the object is not released, that is, when the subdirectory is hidden, the location of the subdirectory is just a blank place and the location is not allowed, so the other home directory is not able to move closer. So it can only be used where the location of the page element needs to be fixed.