JavaScript 如何在任何网站上创建FAQ部分

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

方法：

使用嵌套的HTML div标签创建包含问题和答案的class名称。
为了样式设计，添加一些CSS属性，如对齐、字体大小、填充、边距等。
使用JavaScript实现当问题被点击时显示答案或手风琴项。

HTML代码： 我们使用了问题和答案的class来进行样式设计。

CSS代码： 为了样式设计，我们使用了CSS属性。

JavaScript代码： 我们将使用JavaScript在点击时显示手风琴。我们使用querySelectorAll()方法返回与传递给该方法的class名称相匹配的元素的集合，并将这些元素存储在answers变量中。

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

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
  <link rel="stylesheet" href="styles.css"> 
  <script src="main.js"></script> 
</head> 
  
<body> 
  <h2 style="color:green; text-align:center"> 
    GeeksforGeeks 
  </h2> 
  <div class="layout"> 
    <div class="accordion"> 
      <div class="accordion__question"> 
        <p>Where is Taj Mahal located?</p> 
  
      </div> 
      <div class="accordion__answer"> 
        <p>Taj Mahal is located in Agra, Uttar Pradesh.</p> 
      </div> 
    </div> 
  
    <div class="accordion"> 
      <div class="accordion__question"> 
        <p>How many planets are there in solar system?</p> 
      </div> 
  
      <div class="accordion__answer"> 
        <p> 
          There are eight planets in solar system. 
          Mercury, Venus, Earth, Mars, Jupiter, Saturn, 
          Uranus, and Neptune. 
        </p> 
      </div> 
    </div> 
  </div> 
</body> 
  
</html>

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; 
}

Javascript

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"); 
    } 
  }); 
});

输出： 点击这里查看实时代码输出

JavaScript 如何在任何网站上创建FAQ部分