如何使用 JavaScript 为任何网站创建常见问题解答部分？

在本文中，我们使用 JavaScript 创建了一个常见问题 (FAQ) 手风琴。手风琴用于以列表格式显示内容。它可以展开或折叠以显示其包含的内容。

方法：

• 使用包含问题和答案的类名创建嵌套的 HTML div 标签。
• 对于样式，添加一些 CSS 属性，如对齐、字体大小、填充、边距等。
• 使用 JavaScript，实现在单击问题时显示答案或手风琴项目的功能。

HTML 代码：我们使用类来进行问答。这些类用于样式目的。

index.html

  

  
  

  

  
    GeeksforGeeks
  
  
    
      
        Where is Taj Mahal located?
  
      
      
        Taj Mahal is located in Agra, Uttar Pradesh.
      
    
  
    
      
        How many planets are there in solar system?
      
  
      
        
          There are eight planets in solar system.
          Mercury, Venus, Earth, Mars, Jupiter, Saturn,
          Uranus, and Neptune.
        
      
    
  

  

CSS 代码：对于样式，我们使用了 CSS 属性。

样式文件

body {
  background-color: rgb(153, 218, 196);
}
.layout {
  width: 600px;
  margin: auto;
}
.accordion {
  padding: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  background: rgb(105, 206, 105);
  border-radius: 10px;
}
.accordion__question p {
  margin: 5px;
  padding: 0;
  font-family: Verdana;
  font-size: 20px;
}
.accordion__answer p {
  margin: 5px;
  padding: 10px;
  font-size: large;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: rgb(255, 255, 255);
  background: rgb(82, 170, 122);
  border-radius: 10px;
}
.accordion:hover {
  cursor: pointer;
}
.accordion__answer {
  display: none;
}
.accordion.active .accordion__answer {
  display: block;
}

注意：我们也可以为样式创建另一个文件，或者我们可以将它们添加到样式标签下的同一个 HTML 文件中。

JavaScript 代码：我们将使用 JavaScript 在单击时显示手风琴。我们已经使用 querySelectorAll() 方法返回与传递给此方法的类名匹配的元素集合，并将这些元素存储在变量答案中。

我们使用了 forEach() 方法对answer变量中的每个元素调用该函数。现在，在单击元素时指定事件侦听器 addEventListener()。它将使用 classList 属性检查事件是否具有活动类，该属性返回与该元素或事件关联的所有类的名称。

如果它有活动类，这意味着它正在显示答案或手风琴处于展开状态，那么我们将从该事件中删除活动类以隐藏内容。如果它没有活动类，这意味着手风琴处于折叠状态，那么我们将添加一个活动类。

主文件

let answers = document.querySelectorAll(".accordion");
answers.forEach((event) => {
  event.addEventListener("click", () => {
    if (event.classList.contains("active")) {
      event.classList.remove("active");
    } else {
      event.classList.add("active");
    }
  });
});

完整代码：在本节中，我们将所有代码组合在一起以创建常见问题解答

HTML

    FAQ
    
        body{
            background-color: rgb(153, 218, 196);
        }
        .layout{
            width: 600px;
            margin: auto;
        }
        .accordion{
            padding: 10px;
            margin-top: 10px;
            margin-bottom: 10px;
            background: rgb(105, 206, 105);
            border-radius: 10px;
        }
        .accordion__question p{
            margin: 5px;
            padding: 0;
            font-family: Verdana;
            font-size: 20px;
        }
        .accordion__answer p{
            margin: 5px;
            padding: 10px;
            font-size: large;
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            color: rgb(255, 255, 255);
            background: rgb(82, 170, 122);
            border-radius: 10px; 
        }
        .accordion:hover{
            cursor: pointer;
        }
        .accordion__answer {
            display: none;
        } 
        .accordion.active .accordion__answer {
            display: block;
        }
    


    GeeksforGeeks
    
        
            
                Where is Taj Mahal located?
  
            
            
                Taj Mahal is located in Agra, Uttar Pradesh.
  
            
        
        
            
                How many planets are there in solar system?
  
            
            
                
                  There are eight planets in solar system. 
                  Mercury, Venus, Earth, Mars, Jupiter, Saturn, 
                  Uranus, and Neptune.
                
  
            
        
    
  
    
        let answers=document.querySelectorAll(".accordion");
        answers.forEach((event)=>{
            event.addEventListener('click',()=>{
                if(event.classList.contains("active")){
                    event.classList.remove("active");
                }
                else{
                    event.classList.add("active");
                }
            })
        })
    

输出：

常见问题功能