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

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

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

• HTML代码：

  
  
     
  
      
  
     
  
      
  GeeksforGeeks
      A Computer Science Portal for Geeks
      
  
        
      
  
          
  Tutorials
              
  
                  
  Algorithms
                      
  
                          
  
                          
                              Analysis of Algorithms
                          
                            
                          
  
                              
  Asymptotic Analysis
                              
  Worst, Average and Best Cases
                              
  Asymptotic Notations
                              
  Little o and little omega notations
                              
  Lower and Upper Bound Theory
                              
  Analysis of Loops
                              
  Solving Recurrences
                              
  Amortized Analysis
                              
  What does ‘Space Complexity’ mean?
                              
  Pseudo-polynomial Algorithms
                              
  Polynomial Time Approximation Scheme
                              
  A Time Complexity Question
                          
                          
                          
  Searching Algorithms
                          
  Sorting Algorithms
                          
  Graph Algorithms
                          
  Pattern Searching
                          
  Geometric Algorithms
                          
  Mathematical
                          
  Randomized Algorithms
                          
  Greedy Algorithms
                          
  Dynamic Programming
                          
  Divide and Conquer
                          
  Backtracking
                          
  Branch and Bound
                          
  All Algorithms
                      
                  
                  
  
                      
                          Data Structures
                      
                      
  
                          
  Arrays
                          
  Linked List
                          
  Stack
                          
  Queue
                          
  Binary Tree
                          
  Binary Search Tree
                          
  Heap
                          
  Hashing
                          
  Graph
                          
  Advanced Data Structure
                          
  Matrix
                          
  Strings
                          
  All Data Structures
                      
                  
                  
  
                      Languages
                      
  
                          
  C
                          
  C++
                          
  Java
                          
  Python
                          
  C#
                          
  Javascript
                          
  JQuery
                          
  SQL
                          
  PHP
                          
  Scala
                          
  Perl
                          
  Go Language
                          
  HTML
                          
  CSS
                          
  Kotlin
                      
                  
                  
  
                      Interview Corner
                      
  
                          
  Company Preparation
                          
  Top Topics
                          
  Practice Company Questions
                          
  Interview Experiences
                          
  Experienced Interviews
                          
  Internship Interviews
                          
  Competitive Programming
                          
  Design Patterns
                          
  Multiple Choice Quizzes
                      
                      
  
                          GATE
                      
                      
  
                          ISRO CS
                      
                      
  
                          UGC NET CS
                      
                      
  
                          CS Subjects
                      
                      
  
                          < class="gfg">Web Technologies
                      
                      
              
          
      
  
     
  
  

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

• CSS代码：

• JavaScript 代码：

      var toggler = document.getElementsByClassName("gfg");
      var i;
     
      for (i = 0; i < toggler.length; i++) {
          toggler[i].addEventListener("click",
              function() {
                  this.parentElement.querySelector(".cover")
                      .classList.toggle("active");
                  this.classList.toggle("gfg-down");
              }
          );
      }

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

   

    
        Create a Table of Content in Tree
        View Architecture using HTML, CSS
        and JavaScript
    
      
    
        h1 {
            color: green;
        }
           
        .gfg {
            cursor: pointer;
        }
           
        .gfg::before {
            content: "\25B6";
            color: black;
            display: inline-block;
            margin-right: 8px;
        }
           
        .cover {
            display: none;
        }
           
        .active {
            display: block;
        }
           
        ol [type=a] {
            background-color: yellow;
            color: purple;
        }
    

   

    GeeksforGeeks
    A Computer Science Portal for Geeks
    
    
        Tutorials
            
                Algorithms
                    
                        
                            Analysis of Algorithms
                            
                                Asymptotic Analysis
                                Worst, Average and Best Cases
                                Asymptotic Notations
                                Little o and little omega notations
                                Lower and Upper Bound Theory
                                Analysis of Loops
                                Solving Recurrences
                                Amortized Analysis
                                What does ‘Space Complexity’ mean?
                                Pseudo-polynomial Algorithms
                                Polynomial Time Approximation Scheme
                                A Time Complexity Question
                            
                        
                        Searching Algorithms
                        Sorting Algorithms
                        Graph Algorithms
                        Pattern Searching
                        Geometric Algorithms
                        Mathematical
                        Randomized Algorithms
                        Greedy Algorithms
                        Dynamic Programming
                        Divide and Conquer
                        Backtracking
                        Branch and Bound
                        All Algorithms
                    
                
                
                    Data Structures
                    
                        Arrays
                        Linked List
                        Stack
                        Queue
                        Binary Tree
                        Binary Search Tree
                        Heap
                        Hashing
                        Graph
                        Advanced Data Structure
                        Matrix
                        Strings
                        All Data Structures
                    
                
                
                    Languages
                    
                        C
                        C++
                        Java
                        Python
                        C#
                        Javascript
                        JQuery
                        SQL
                        PHP
                        Scala
                        Perl
                        Go Language
                        HTML
                        CSS
                        Kotlin
                    
                
                
                    Interview Corner
                    
                        Company Preparation
                        Top Topics
                        Practice Company Questions
                        Interview Experiences
                        Experienced Interviews
                        Internship Interviews
                        Competitive Programming
                        Design Patterns
                        Multiple Choice Quizzes
                    
                    GATE
                    ISRO CS
                    UGC NET CS
                    CS Subjects
                    Web Technologies
                
            
        
    
   
    
        var toggler = document.getElementsByClassName("gfg");
        var i;
   
        for (i = 0; i < toggler.length; i++) {
            toggler[i].addEventListener("click",
                function() {
                    this.parentElement.querySelector(".cover")
                        .classList.toggle("active");
                    this.classList.toggle("gfg-down");
                }
            );
        }
    

   

输出：