极客笔记JavaScript 如何创建一个常见问题解答页面
概述
常见问题解答（FAQ）是处理产品销售、培训注册或特定领域公司的网站的主要功能。许多用户可能会遇到或可能会遇到许多问题，因此这些问题和解决方案在FAQ部分中显示，以便如果任何用户遇到任何错误，他可以通过查看网站的FAQ部分来解决并继续工作。
方法
创建FAQ的主要方法是手风琴。所有常见问题都以手风琴的形式进行格式化。手风琴是一个具有展开和折叠功能的组件。在下面的示例中，我们使用HTML和CSS构建了一个手风琴，并使用JavaScript提供了功能。
步骤
步骤1 - 创建一个HTML模板并在代码的body中添加一个包含类似手风琴组件的父div，该组件将包含FAQ的解决方案。
步骤2 - 在父div中创建另一个div，其中将包含从数组中渲染的所有常见问题。
步骤3 - 现在初始化一个包含对象的数组，对象内部是问题-答案的键值对。将常见问题和解决方案放入其中。同时初始化空字符串类型的变量。
步骤4 - 使用map()函数将数组的元素与手风琴组件HTML模板进行映射，并将所有元素与之前初始化的空字符串连接起来。
fsec += ` <div id="{i}" style="border-radius: 5px;box-shadow:0 0 5px #c5c5c5; padding:0.5rem; cursor:pointer;">
<div class="ques" onclick="showAns()">
<p style="filter: invert(1);">{f.ques}</p>
<p style="filter: invert(1);">➕</p>
</div>
<div class="ans">${f.ans}</div>
</div>`;
})
步骤5 - 现在使用innerHTML属性，并显示包含数组所有拼接元素的变量中的单个变量。
document.getElementById("faqQues").innerHTML = fsec;
步骤6 - 为了给答案部分开启和关闭的功能，使用 document.getElementById() 属性将”ques”元素存入一个变量中。使用for循环给每个FAQ问题提供 click() 事件。将”ans”类名元素的样式设置为”display:none”。现在使用if-else条件来维护开启和关闭的功能。
var acc = document.getElementsByClassName("ques");
for (var i = 0; i < faqQuesAns.length; i++) {
acc[i].addEventListener("click", function () {
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
示例
在这个示例中，我们使用了使用HTML构建的手风琴，并使用Javascript为其提供开关功能。FAQ页面包含一组常见问题，在常见问题（FAQ）页面上显示。
<html>
<head>
<title>Tutorialspoint FAQ Page</title>
<style>
.faqSection {
display: flex;
flex-direction: column;
width: 40rem;
margin: auto;
}
.ques {
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 800;
background: #40a944;
border-radius: 5px;
padding: 0.5rem
}
.ans {
display: none;
padding-top: 1rem;
}
</style>
</head>
<body style="height: 95vh; display: flex; place-content: center;">
<div class="faqSection>
<p style="text-align: center;">FAQ</p>
<div id="faqQues" style="display: flex;flex-direction: column;gap: 1rem;"></div>
</div>
<script>
var faqQuesAns = [
{"ques": "How to join training program courses on tutorialspoint?", "ans": `To join our training program courses, Visit us at: <a href= https://www.tutorialspoint.com/index.htm"> https://www.tutorialspoint.com/index.htm </a>`},
{"ques": "Which courses are available on tutorialspoint ?", "ans": "Get all the training program courses on our platform. Complete the training in your particular domain and get your certificate now."},
{"ques": "Benifits of joining annual membership of tutorialspoint?", "ans": `The annual membership provides you to access 5500+ hand picked quality video. Join Now: <a href="https://www.tutorialspoint.com/index.htm"> https://www.tutorialspoint.com/index.htm </a>`},
{"ques": "Who writes the contents for tutorialspoint.com?", "ans": "The content on the website are created by highly skilled professionals. A number of freelancers helped us in our effort to build a database of quality tutorials. They contributed their best tutorials into our Shared Tutorials Dictionary. We have established permanent setup in Hyderabad, INDIA, where we have a dedicated team of subject matters experts, technical writers, web developers and graphics designers who are taking the website to its next height of excellence."} ];
var fsec = "";
faqQuesAns.map((f, i) => {
fsec += ` <div id="{i}" style="border-radius: 5px;box-shadow:0 0 5px #c5c5c5; padding:0.5rem; cursor:pointer;">
<div class="ques" onclick="showAns()">
<p style="filter: invert(1);">{f.ques}</p>
<p style="filter: invert(1);">➕</p>
</div>
<div class="ans">${f.ans}</div>
</div>`;
})
document.getElementById("faqQues").innerHTML = fsec;
var qsec = document.getElementsByClassName("ques");
for (var i = 0; i < faqQuesAns.length; i++) {
qsec[i].addEventListener("click", function () {
var answer = this.nextElementSibling;
if (answer.style.display === "block") {
answer.style.display = "none";
} else {
answer.style.display = "block";
}
});
}
</script>
</body>
</html>
下面的图片显示了网页上的所有常见问题。就像上面的示例中，我们是从一个数组中渲染问题的。显示的网页具有响应性，也可以在手机或平板电脑上查看。
结论
一个网站的“常见问题”(FAQ)网页是一个页面，其中包含了以前由一些用户提出的问题的集合。这些问题显示在FAQ页面上，以便将来如果其他用户遇到相同的问题，他们可以访问FAQ页面并查看是否有与FAQ页面中提到的问题相同的问题，以解决他们的问题。在实时项目中加载常见问题时，我们可以使用一个API来连接前端和数据库，并直接从数据库加载问题，而不是从一个数组中加载数据。