JavaScript 如何创建常见问题解答（FAQ）页面

常见问题解答（FAQ）部分是任何网站最重要的部分之一，特别是如果您提供服务。如果您想要学习如何自己创建FAQ页面，请欢迎！今天我们将学习如何使用JavaScript创建FAQ页面。

FAQ页面所需的功能:

初始状态下，只显示问题，每个问题都由一条线分隔。
单击加号图标，答案部分展开，显示特定问题的答案。
单击加号图标并显示答案部分时，将加号图标替换为叉号图标。
单击叉号图标，答案部分折叠，叉号图标再次替换为加号图标。

HTML和CSS将负责用户界面，而JavaScript将帮助我们实现上述功能，让我们开始吧。

您可以使用不同的HTML标签来创建页面结构，这里我们使用无序列表来创建页面结构。

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" 
        content="width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" 
          integrity= 
"sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
          crossorigin="anonymous" referrerpolicy="no-referrer"/> 
    <link rel="stylesheet" href="styles.css"/> 
</head> 
<body> 
    <div class="container"> 
        <h1>FAQs</h1> 
        <ul> 
            <li class="faq"> 
                <div class="question"> 
                    Which is the best portal to study  
                    Computer Science? 
                    <span class="icon-main"> 
                        <i class="fa-solid fa-plus"></i> 
                    </span> 
                </div> 
                <div class="answer non-active"> 
                    GeeksforGeeks is the best Computer  
                    Science portal for geeks. It contains  
                    well written, well thought and well  
                    explained computer science and  
                    programming articles. 
                </div> 
            </li> 
            <li class="faq"> 
                <div class="question"> 
                    What is a FAQ section? 
                    <span class="icon-main"> 
                        <i class="fa-solid fa-plus"></i> 
                    </span> 
                </div> 
                <p class="answer non-active">the Frequently  
                    Asked Questions (FAQ) section is  
                    a part of your website where you  
                    address common concerns, questions, 
                    and objections that customers have. 
                </p> 
  
            </li> 
            <li class="faq"> 
                <div class="question"> 
                    What should be included in a FAQ section? 
                    <span class="icon-main"> 
                        <i class="fa-solid fa-plus"></i> 
                    </span> 
                </div> 
                <p class="answer non-active"> 
                    Fully answer the question, don't  
                    just link to a different page. 
                </p> 
  
            </li> 
        </ul> 
    </div> 
    <script src="script.js"></script> 
</body> 
</html>

注：这里我们使用FontAwesome字体图标作为图标，使用google字体来添加新的字体样式。

CSS

@import url( 
"https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Slab&family=Spartan:wght@400;700&display=swap"); 
  
.container { 
  position: absolute; 
  top: 20%; 
  left: 50%; 
  transform: translate(-50%, -20%); 
  width: 60%; 
} 
h1 { 
  text-align: center; 
  font-family: "Roboto Slab", serif; 
  font-size: 40px; 
} 
li { 
  list-style: none; 
  margin-bottom: 10px; 
  padding: 15px; 
  border-bottom: 2px solid #6d6b6b; 
} 
.question { 
  font-family: "Spartan", sans-serif; 
  font-size: 20px; 
  font-weight: 600; 
  margin-bottom: 10px; 
  position: relative; 
  color: #5c5a5a; 
} 
.icon-main { 
  position: absolute; 
  right: 0px; 
  cursor: pointer; 
} 
.non-active { 
  display: none; 
} 
.answer{ 
  font-size: 17px; 
  font-family: "Spartan", sans-serif; 
}

在这里，“non-active”类被分配了一个CSS属性display: none，负责展开和折叠答案部分。

JavaScript:

Javascript

const faqs = document.querySelectorAll(".faq"); 
for (const item of faqs) { 
  const curr_faq = item.childNodes; 
  const question = curr_faq[1]; 
  const answer = curr_faq[3]; 
  const icon = question.querySelector(".icon-main"); 
  icon.addEventListener("click", function () { 
    answer.classList.toggle("non-active"); 
    const i = icon.querySelector("i"); 
    i.classList.toggle("fa-xmark"); 
    i.classList.toggle("fa-plus"); 
    console.log(i); 
  }); 
}

方法：

变量faqs包含一个数组，其中包含取决于FAQ页面上问题数量的所有li元素。由于我们希望每个问题和答案对具有相同的功能，因此我们必须遍历这个faqs数组并将以下属性添加到每个li元素中。
由于我们正在遍历li元素，问题和答案div是它的子元素，所以我们可以使用childNodes属性提取它们，它返回一个数组，其内容如下。

JavaScript 如何创建常见问题解答（FAQ）页面

由于我们只对div.question和div.answer感兴趣，我们提取curr_faq数组的第一个和第三个元素。
您还可以通过在父元素上使用querySelector方法提取子元素，我们之前也使用过这种方法来获取icon元素。
如果answer元素包含非活动类（表示当前答案部分已折叠），则在点击加号图标时将其删除。同样地，如果answer元素不包含非活动类（表示当前答案部分已展开），则在点击叉号图标时将其添加。
您可以使用classList.add()和classList.remove()方法来删除和添加非活动类，从而为我们提供了答案元素的展开和折叠功能。但是我更喜欢使用classList.toggle()方法一起完成这两个操作，这样可以减少一些代码行。
此外，根据需要在加号和叉号图标之间切换添加和删除fa-plus和fa-xmark类。

太棒了！我们的FAQ页面已经准备好了。让我们将我们的HTML、CSS和Javascript代码组合在一起，看看我们的页面是什么样子。

最终代码：

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
        integrity= 
"sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
        crossorigin="anonymous" referrerpolicy="no-referrer" /> 
    <style> 
        @import url( 
"https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Slab&family=Spartan:wght@400;700&display=swap"); 
  
        .container { 
            position: absolute; 
            top: 20%; 
            left: 50%; 
            transform: translate(-50%, -20%); 
            width: 60%; 
        } 
  
        h1 { 
            text-align: center; 
            font-family: "Roboto Slab", serif; 
            font-size: 40px; 
        } 
  
        li { 
            list-style: none; 
            margin-bottom: 10px; 
            padding: 15px; 
            border-bottom: 2px solid #6d6b6b; 
        } 
  
        .question { 
            font-family: "Spartan", sans-serif; 
            font-size: 20px; 
            font-weight: 600; 
            margin-bottom: 10px; 
            position: relative; 
            color: #5c5a5a; 
        } 
  
        .icon-main { 
            position: absolute; 
            right: 0px; 
            cursor: pointer; 
        } 
  
        .non-active { 
            display: none; 
        } 
  
        .answer { 
            font-size: 17px; 
            font-family: "Spartan", sans-serif; 
        } 
    </style> 
    <title>FAQs</title> 
</head> 
  
<body> 
    <div class="container"> 
        <h1>FAQs</h1> 
        <ul> 
            <li class="faq"> 
                <div class="question"> 
                    Which is the best portal to study 
                    Computer Science? 
                    <span class="icon-main"> 
                        <i class="fa-solid fa-plus"></i> 
                    </span> 
                </div> 
                <div class="answer non-active"> 
                    GeeksforGeeks is the best Computer 
                    Science portal for geeks. It contains 
                    well written, well thought and well 
                    explained computer science and 
                    programming articles. 
                </div> 
            </li> 
            <li class="faq"> 
                <div class="question"> 
                    What is a FAQ section? 
                    <span class="icon-main"> 
                        <i class="fa-solid fa-plus"></i> 
                    </span> 
                </div> 
                <p class="answer non-active"> 
                    the Frequently Asked Questions (FAQ) 
                    section is a part of your website 
                    where you address common concerns, 
                    questions,and objections that 
                    customers have. 
                </p> 
  
            </li> 
            <li class="faq"> 
                <div class="question"> 
                    What should be included in a FAQ section? 
                    <span class="icon-main"> 
                        <i class="fa-solid fa-plus"></i> 
                    </span> 
                </div> 
                <p class="answer non-active"> 
                    Fully answer the question, don't 
                    just link to a different page. 
                </p> 
  
            </li> 
        </ul> 
    </div> 
    <script> 
        const faqs = document.querySelectorAll(".faq"); 
        for (const item of faqs) { 
            const curr_faq = item.childNodes; 
            console.log(curr_faq); 
            const question = curr_faq[1]; 
            const answer = curr_faq[3]; 
            const icon = question.querySelector(".icon-main"); 
            icon.addEventListener("click", function () { 
                answer.classList.toggle("non-active"); 
                const i = icon.querySelector("i"); 
                i.classList.toggle("fa-xmark"); 
                i.classList.toggle("fa-plus"); 
            }); 
        } 
    </script> 
</body> 
  
</html>

输出：

JavaScript 如何创建常见问题解答（FAQ）页面