Ultra-lightweight three-level expansion list based on jquery_jquery

In the past few days, in the company's general management background, I have used the left and right framework structure. Click on the left side and expand the content on the right side. In the project, I often encounter the second or third level on the left side. I used to use dtree, but I found that dtree, The style and structure are difficult to control.
If it is dynamic data, you have to write it into the cs file and enter characters. This is not conducive to maintenance, and you will not be able to find it after a long time. ,
So today I wrote a lightweight three-level expansion menu. If necessary, you can add another level. Generally, three levels are enough for company projects.

Introduction:
You don’t need to define class and ID for the div part, as long as it has the following structure, the data can be dynamic or static
You can control the style and modify it to suit your own needs The style

code is as follows:
css

Copy code The code is as follows:

js：

Copy code The code is as follows:

div:

Copy code The code is as follows:

< li>Home page management



• Home page title 1
  
  
  
  • _Homepage title 1_1
  
  
  • _Home page title 1_2
  
  
  
  


• Home title 2


• Home title 3





• Product Management
  
  
  
  • Product Title 1
  
  
  • Product Title 2
  
  < ;li>Product title 3
  
  
  

File package download