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
Deeply understand the reason behind the prompt "No such file or directory" when executing a file in Linux
1 Background Recently, I have been studying how t...
Detailed explanation of Web front-end performance optimization: resource merging and compression
Resource merging and compression for two purposes...
Analysis of the principle of Vue nextTick
Table of contents Event Loop miscroTask (microtas...
Nginx location matching rule example
1. Grammar location [=|~|~*|^~|@] /uri/ { ... } 2...
MySQL slow_log table cannot be modified to innodb engine detailed explanation
background Getting the slow query log from mysql....
How to configure jdk environment under Linux
1. Go to the official website to download the jdk...
A detailed tutorial on using Docker to build a complete development environment
Introduction to DNMP DNMP (Docker + Nginx + MySQL...
MySQL free installation version configuration tutorial
This article shares the MySQL free installation c...
Configure Mysql master-slave service implementation example
Configure Mysql master-slave service implementati...
Install CentOS7 in VMware (set static IP address) and install mySql database through docker container (super detailed tutorial)
A sophomore asked me how to install and configure...
Node+express to achieve paging effect
This article shares the specific code of node+exp...
Issues installing Python3 and Pip in ubuntu in Docker
text 1) Download the Ubuntu image docker pull ubu...
Solution to HTML2 canvas SVG not being recognized
There is a new feature that requires capturing a ...
Detailed explanation of Linux lsof command usage
lsof (list open files) is a tool to view files op...
Detailed summary of MySQL and connection-related timeouts
MySQL and connection related timeouts Preface: To...