HTML & CSS & JS compatibility tree (ie, Firefox, chrome)

Time:2021-12-3

What is a tree in web design? To put it simply, clicking a link will expand the subordinate directory, and then clicking Join will be the simplest tree. How to implement it? It is also very simple. There is an attribute display in CSS, which can control the reality of the content or not. Then you can control the attributes of CSS through JS. See the following code:
< div > top level directory < / div >
<div id=”menulist”>
< div > menu 1 < / div >
< div > menu 2 < / div >
< div > menu 3 < / div >
</div>
This is the prototype of the tree. Of course, the display attribute of CSS is added to it in the initial state. The most commonly used display attributes are none and block
None is not displayed, while block is displayed like a block type element. Look at the code
< div > top level directory < / div >
<div id=”menulist” style=”display:none”>
< div > menu 1 < / div >
< div > menu 2 < / div >
< div > menu 3 < / div >
</div>
In this way, when running the page, only the top-level directory will be displayed. If it is controlled, JS code needs to be added
1. Obtain menulist first
var menulist=document.getElementById(“menulist”);
2. Or you can control the CSS properties 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 is generated
<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 level 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 have used this method to make attribute directories. No matter how complex the directories to be made are, this method has been tried repeatedly. The following screenshot is the operation effect of the complex tree directory I made under ie:
 
 
The terrible thing happened in chrome. After some information retrieval, we finally found the reason. In addition to block and none, there are many other properties in display. Block is displayed in blocks, and my top is arranged in tables. God knows whether there is deep hatred between table and block. Microsoft thinks it has cleverly ignored their hatred, Chrome still honestly abides by the standards, and so does Firefox, so there are still problems in their explanation. How to solve this problem:
Display also has a property of table cell, that is, rendering content in the form of table, which is just in line with my situation of using table for layout. The following are compatible renderings of the three browsers:
 
IE6
 
chrome2
 
firefox3.5