What is a tree in WEB design? Simply put, click on a link, expand the lower directory, and then click on it to join. This is the simplest tree. How to implement it? It is also very simple. There is a property display in CSS. This can control the reality of the content but it still does not display. Then you can control the properties of CSS through JS., see the following code:
<div>Top Directory</div>
<div id=menulist>
<div>Menu 1</div>
<div>Menu 2</div>
<div>Menu 3</div>
</div>
This is considered a prototype of the tree. Of course, the initial state adds the display attribute of css to it. The most commonly used display attributes are none and block attributes.
none is not displayed, while block is displayed like a block type element. Then look at the code
<div>Top Directory</div>
<div id=menulist style=display:none>
<div>Menu 1</div>
<div>Menu 2</div>
<div>Menu 3</div>
</div>
In this way, if you run the page, you will only display the top-level directory. If you control it, you need to add js code.
1. Get menulist first
var menulist=document.getElementById(menulist);
2. Or you can control its CSS properties after this 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 most original tree is generated, 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>
<div on
click=showmenu();>Top Directory</div>
<div id=menulist style=display:none>
<div>Menu 1</div>
<div>Menu 2</div>
<div>Menu 3</div>
</div>
For a long time, I used to make attribute directories according to this method. No matter how complex the directory to be made, this method has been tried and tested. The following screenshot is the operation effect of a relatively complex tree directory I made under IE:
The terrible thing happened under Chrome and it was completely messed up. After some information retrieval, I finally found the reason. In addition to block and none, display has many other attributes. Block is displayed in blocks. I was laid out on it in a table. God knows whether table and block have deep hatred. Microsoft thought it was cleverly ignoring their hatred, while Chrome still obeyed the standards very honestly. Firefox is the same, so there are still problems in their explanations. How to solve this problem:
Display also has a property table-cell, which means rendering content in the form of a table. This is exactly in line with my use of a table for layout. The following is a compatible rendering of three browsers:
IE6
chrome2
firefox3.5