HTML&CSS&JS compatibility tree (IE, Firefox, Chrome)
|
What is a tree in web design? Simply put, clicking a link will expand the sub-directory, and clicking again will close it. This is the simplest tree. How to implement it is also very simple. There is a property display in CSS, which can control whether the content is displayed or not. Then you can use JS to control the properties of CSS to achieve it. 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 initial state adds the CSS display attribute to it. The most commonly used display attributes are none and block. None means no display, while block is displayed like a block type element. Let's 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 you want to control it, you need to add js code 1. Get menulist first var menulist = document.getElementById("menulist"); 2. Or the object can control its CSS properties 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 primitive tree is generated, and 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 this method to create property directories. No matter how complex the directory was, this method worked every time. The following screenshot shows the running effect of a more complex tree directory I made under IE:   A terrible thing happened. Everything looked messed up in Chrome. After some information search, I finally found the reason. In addition to block and none, display has many other attributes. Block is displayed in blocks, and I used tables for layout. God knows whether tables and blocks have a deep hatred. Microsoft thinks it is smart to ignore their hatred, while Chrome still abides by the standards honestly, and so does Firefox. So there is still a problem in their explanation. How to solve this problem: Display also has a property called table-cell, which renders the content in the form of a table. This is exactly what I want to do when I use a table for layout. The following are the compatible renderings of three browsers:  IE6  chrome2  Firefox 3.5 |
<<: React component communication routing parameter transfer (react-router-dom)
>>: Example of how to modify styles via CSS variables
Recommend
【HTML element】Detailed explanation of tag text
1. Use basic text elements to mark up content Fir...
Detailed tutorial for installing mysql5.7.21 under Windows system
MySQL Installer provides an easy-to-use, wizard-b...
How to prevent hyperlink redirection using JavaScript (multiple ways of writing)
Through JavaScript, we can prevent hyperlinks fro...
The difference between ${param} and #{param} in MySQL
The parameter passed by ${param} will be treated ...
5 ways to achieve the diagonal header effect in the table
Everyone must be familiar with table. We often en...
How to pass the value of the select drop-down box to the id to implement the code
The complete code is as follows : HTML code: Copy ...
Detailed explanation of MySQL database transaction isolation levels
Database transaction isolation level There are 4 ...
Implementation of k8s node rejoining the master cluster
1. Delete node Execute kubectl delete node node01...
Do you know how to use Vue to take screenshots of web pages?
Table of contents 1. Install html2Canvas 2. Intro...
A preliminary study on composite primary key and joint primary key in SQL statements
1. Composite primary key The so-called composite ...
How to configure MySQL master-slave synchronization in Ubuntu 16.04
Preparation 1. The master and slave database vers...
Solution to the bug that IE6 select cannot be covered by div
Use div to create a mask or simulate a pop-up wind...
Methods and techniques for designing an interesting website (picture)
Have you ever encountered a situation where we hav...
How to Develop a Progressive Web App (PWA)
Table of contents Overview Require URL of the app...
In-depth analysis of MySQL deadlock issues
Preface If our business is at a very early stage ...