📜  使用 HTML、CSS 和 JavaScript 在树视图架构中创建目录

📅  最后修改于: 2021-11-08 05:36:55             🧑  作者: Mango

树视图元素是一种下拉菜单,但组织得很好。这种视图为您的网站提供了一个有组织的外观,我们可以使用 HTML、CSS 和 JavaScript 创建一个下拉列表的树视图架构。我们将整个过程分为创建结构和设计结构两部分。下面分别对这两部分进行阐述。

创建结构:在本节中,我们将在元素的树视图架构中创建目录的基本结构。

  • HTML代码:
    
    
       
    
        
            Create a Table of Content in Tree
            View Architecture using HTML, CSS
            and JavaScript
        
    
       
    
        

    GeeksforGeeks

        A Computer Science Portal for Geeks     
               
              
    • Tutorials             
                        
      1. Algorithms                     
                                  
        1.                                                      Analysis of Algorithms                                                                             
                                        
          1. Asymptotic Analysis
          2.                             
          3. Worst, Average and Best Cases
          4.                             
          5. Asymptotic Notations
          6.                             
          7. Little o and little omega notations
          8.                             
          9. Lower and Upper Bound Theory
          10.                             
          11. Analysis of Loops
          12.                             
          13. Solving Recurrences
          14.                             
          15. Amortized Analysis
          16.                             
          17. What does ‘Space Complexity’ mean?
          18.                             
          19. Pseudo-polynomial Algorithms
          20.                             
          21. Polynomial Time Approximation Scheme
          22.                             
          23. A Time Complexity Question
          24.                         
                                  
        2.                         
        3. Searching Algorithms
        4.                         
        5. Sorting Algorithms
        6.                         
        7. Graph Algorithms
        8.                         
        9. Pattern Searching
        10.                         
        11. Geometric Algorithms
        12.                         
        13. Mathematical
        14.                         
        15. Randomized Algorithms
        16.                         
        17. Greedy Algorithms
        18.                         
        19. Dynamic Programming
        20.                         
        21. Divide and Conquer
        22.                         
        23. Backtracking
        24.                         
        25. Branch and Bound
        26.                         
        27. All Algorithms
        28.                     
                        
      2.                 
      3.                                              Data Structures                                          
                                  
        1. Arrays
        2.                         
        3. Linked List
        4.                         
        5. Stack
        6.                         
        7. Queue
        8.                         
        9. Binary Tree
        10.                         
        11. Binary Search Tree
        12.                         
        13. Heap
        14.                         
        15. Hashing
        16.                         
        17. Graph
        18.                         
        19. Advanced Data Structure
        20.                         
        21. Matrix
        22.                         
        23. Strings
        24.                         
        25. All Data Structures
        26.                     
                        
      4.                 
      5.                     Languages                     
                                  
        1. C
        2.                         
        3. C++
        4.                         
        5. Java
        6.                         
        7. Python
        8.                         
        9. C#
        10.                         
        11. Javascript
        12.                         
        13. JQuery
        14.                         
        15. SQL
        16.                         
        17. PHP
        18.                         
        19. Scala
        20.                         
        21. Perl
        22.                         
        23. Go Language
        24.                         
        25. HTML
        26.                         
        27. CSS
        28.                         
        29. Kotlin
        30.                     
                        
      6.                 
      7.                     Interview Corner                     
                                  
        1. Company Preparation
        2.                         
        3. Top Topics
        4.                         
        5. Practice Company Questions
        6.                         
        7. Interview Experiences
        8.                         
        9. Experienced Interviews
        10.                         
        11. Internship Interviews
        12.                         
        13. Competitive Programming
        14.                         
        15. Design Patterns
        16.                         
        17. Multiple Choice Quizzes
        18.                     
                            
      8.                         GATE                     
      9.                     
      10.                         ISRO CS                     
      11.                     
      12.                         UGC NET CS                     
      13.                     
      14.                         CS Subjects                     
      15.                     
      16.                         < class="gfg">Web Technologies                     
      17.                                  
              
    •     
       

设计结构:在上一节中,我们已经创建了基本树视图元素的结构。在本节中,我们将设计树视图的结构。

  • CSS代码:
    
    
  • JavaScript 代码:
    
    

组合 HTML、CSS 和 JavaScript 代码:这是组合上述部分后的最终代码。它将在树视图架构中显示目录。



   

    
        Create a Table of Content in Tree
        View Architecture using HTML, CSS
        and JavaScript
    
      
    

   

    

GeeksforGeeks

    A Computer Science Portal for Geeks     
    
            
  • Tutorials             
                      
    1. Algorithms                     
                                
      1.                             Analysis of Algorithms                             
                                          
        1. Asymptotic Analysis
        2.                                 
        3. Worst, Average and Best Cases
        4.                                 
        5. Asymptotic Notations
        6.                                 
        7. Little o and little omega notations
        8.                                 
        9. Lower and Upper Bound Theory
        10.                                 
        11. Analysis of Loops
        12.                                 
        13. Solving Recurrences
        14.                                 
        15. Amortized Analysis
        16.                                 
        17. What does ‘Space Complexity’ mean?
        18.                                 
        19. Pseudo-polynomial Algorithms
        20.                                 
        21. Polynomial Time Approximation Scheme
        22.                                 
        23. A Time Complexity Question
        24.                             
                                
      2.                         
      3. Searching Algorithms
      4.                         
      5. Sorting Algorithms
      6.                         
      7. Graph Algorithms
      8.                         
      9. Pattern Searching
      10.                         
      11. Geometric Algorithms
      12.                         
      13. Mathematical
      14.                         
      15. Randomized Algorithms
      16.                         
      17. Greedy Algorithms
      18.                         
      19. Dynamic Programming
      20.                         
      21. Divide and Conquer
      22.                         
      23. Backtracking
      24.                         
      25. Branch and Bound
      26.                         
      27. All Algorithms
      28.                     
                      
    2.                 
    3.                     Data Structures                     
                                
      1. Arrays
      2.                         
      3. Linked List
      4.                         
      5. Stack
      6.                         
      7. Queue
      8.                         
      9. Binary Tree
      10.                         
      11. Binary Search Tree
      12.                         
      13. Heap
      14.                         
      15. Hashing
      16.                         
      17. Graph
      18.                         
      19. Advanced Data Structure
      20.                         
      21. Matrix
      22.                         
      23. Strings
      24.                         
      25. All Data Structures
      26.                     
                      
    4.                 
    5.                     Languages                     
                                
      1. C
      2.                         
      3. C++
      4.                         
      5. Java
      6.                         
      7. Python
      8.                         
      9. C#
      10.                         
      11. Javascript
      12.                         
      13. JQuery
      14.                         
      15. SQL
      16.                         
      17. PHP
      18.                         
      19. Scala
      20.                         
      21. Perl
      22.                         
      23. Go Language
      24.                         
      25. HTML
      26.                         
      27. CSS
      28.                         
      29. Kotlin
      30.                     
                      
    6.                 
    7.                     Interview Corner                     
                                
      1. Company Preparation
      2.                         
      3. Top Topics
      4.                         
      5. Practice Company Questions
      6.                         
      7. Interview Experiences
      8.                         
      9. Experienced Interviews
      10.                         
      11. Internship Interviews
      12.                         
      13. Competitive Programming
      14.                         
      15. Design Patterns
      16.                         
      17. Multiple Choice Quizzes
      18.                     
                          
    8. GATE
    9.                     
    10. ISRO CS
    11.                     
    12. UGC NET CS
    13.                     
    14. CS Subjects
    15.                     
    16. Web Technologies
    17.                              
            
  •     
            

输出: