如何使用JavaScript创建任何网站的常见问题解答（FAQ）部分

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

方法：

创建一个带有包含问题和答案的嵌套HTML div标签。
为了样式化，添加一些CSS属性，如对齐方式、字体大小、填充、边距等。
使用JavaScript实现当问题被点击时显示答案或手风琴项的功能。
HTML代码： 我们使用类来表示问题和答案。这些类用于样式化目的。

CSS代码： 用于样式化的CSS属性。

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

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

<!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>Taj Mahal位于哪里？</p>
            </div>
            <div class="accordion__answer">
               <p>Taj Mahal位于北方邦的阿格拉市。</p>
            </div>
         </div>
         <div class="accordion">
            <div class="accordion__question">
               <p>太阳系中有多少颗行星？</p>
            </div>
            <div class="accordion__answer">
               <p>太阳系中有八颗行星。水金地火木土天，和海王星。</p>
            </div>
         </div>
      </div>
   </body>
</html>

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

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）部分