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 a lot of ways to make this tree, but I've seen the following example: When you click on the main directory with the mouse, pull out the corresponding subdirectory, and then click again to restore the original, the effect of the Soyi electronic magazine and the effect of the directory is 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 "onclick=" document.all.child1.style.display= (Document.all.child1.style.display = = ' None ']? ': ' None ' '
+ 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 "onclick=" document.all.child2.style.display= (Document.all.child2.style.display = = ' None ']? ': ' None ' '
+ 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, in Main1 div write "+ home directory 1", and on its top load a mouse click event: OnClick and a small section of 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.
