Tutorial on making a tree directory with CSS_CSS/HTML

This article introduces in detail how to use CSS to conveniently control the "show" and "hide" attributes of objects and create a tree directory. Use CSS to create such a tree directory. The method is simple and the code is relatively simple. There are few, so I wrote it out and shared it with netizens so that they can make one when needed.

Most of Suoyi electronic magazines use tree directories. When the mouse clicks on the main directory, the subdirectories are expanded; when the main directory is clicked again, the subdirectories are closed. It appears simple, lively, and unpretentious.

There are many ways to create this kind of tree-like directory. Recently, I first looked at the following example: when you click on the main directory with the mouse, the corresponding subdirectory will be pulled down, and when you click again, it will return to its original state. , the effect is exactly the same as the catalog effect in Soyi electronic magazine.

Production method:
I first copy the code that produces this effect as follows, and then combine the code to explain the production method:
〈div id="main1" style="color:blue " onclick="document.all.child1.style.display=(document.all.child1.style.display ==''none'')?'''':''none''" 〉
+ Main 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''" 〉
+ Main 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: " " represents a character space
1. First define two DIVs, one with For the main directory, name it: main1; for the other one for the corresponding subdirectory, name it: child1. 2. Write "+ Main Directory 1" in the DIV of main1, 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 the DIV of main1 (that is, on "+ Main Directory 1"), if the DIV of child1 is hidden, let it be displayed; if it is displayed, let it be hidden. .
3. Write a subdirectory on the DIV of child1 and set it as a hyperlink. In the example above, I set an empty link. In actual production, I changed it to a real link so that it points to the link. Target. Add a CSS: style="display:none" to the DIV definition of child1. The purpose is to make the subdirectory hidden at the beginning.
To create other directories, just repeat the above three steps. Press F12 to see the effect. This method mainly uses the display attribute of CSS: display. One of its characteristics is that when the object is hidden, the page space occupied by the object will be automatically given up. We know that CSS has another attribute: visibility also has the function of showing and hiding objects, but it cannot be used to create the tree-like directory above. Because after 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 blank and the position is not released, so another main directory cannot be moved closer. So it can only be used where the position of page elements needs to be fixed.