开发者们大家好！我很高兴分享我的最新项目：FAQ Accordion Web 应用程序。该项目非常适合那些希望为其网站创建交互式且用户友好的常见问题解答部分的人。这是使用 HTML、CSS 和 JavaScript 增强前端开发技能的好方法，同时构建可在各种应用程序中使用的实用组件。
FAQ Accordion 是一个 Web 应用程序，旨在以可扩展和可折叠的格式显示常见问题。它采用简洁现代的设计，允许用户单击问题即可显示相应的答案。该项目展示了如何创建交互式常见问题解答部分，通过使内容易于访问来改善用户体验。
以下是项目结构的概述：
FAQ-Accordion/ ├── index.html ├── style.css └── script.js
要开始该项目，请按照以下步骤操作：
克隆存储库：
git clone https://github.com/abhishekgurjar-in/FAQ-Accordion.git
打开项目目录:
cd FAQ-Accordion
运行项目:
index.html 文件定义了 FAQ Accordion 应用程序的结构，包括问题和答案。这是一个片段：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>FAQ accordion</title>
<link rel="stylesheet" href="./style.css" />
<script src="./script.js" defer></script>
</head>
<body>
<div class="conatiner">
<img src="./assets/images/background-pattern-desktop.svg" alt="" />
<div class="box">
<h1>
FAQs
<span class="imageStar">
<img src="./assets/images/icon-star.svg" alt=""
/></span>
</h1>
<section class="section">
<div class="question">
<h3>Is Frontend Mentor free?</h3>
<div class="icon-img">
<img src="./assets/images/icon-plus.svg" alt="" />
</div>
</div>
<div class="answer">
<p>
Frontend Mentor offers realistic coding challenges to help
developers improve their frontend coding skills with projects in
HTML, CSS, and JavaScript. It's suitable for all levels and ideal
for portfolio building.
</p>
</div>
<hr />
</section>
<section class="section">
<div class="question">
<h3>Can I use Frontend Mentor projects in my portfolio?</h3>
<div class="icon-img">
<img src="./assets/images/icon-plus.svg" alt="" />
</div>
</div>
<div class="answer">
<p>
Yes, Frontend Mentor offers both free and premium coding
challenges, with the free option providing access to a range of
projects suitable for all skill levels.
</p>
</div>
<hr />
</section>
<section class="section">
<div class="question">
<h3>Can I use Frontend Mentor projects in my portfolio?</h3>
<div class="icon-img">
<img src="./assets/images/icon-plus.svg" alt="" />
</div>
</div>
<div class="answer">
<p>
Yes, you can use projects completed on Frontend Mentor in your
portfolio. It's an excellent way to showcase your skills to
potential employers!
</p>
</div>
<hr />
</section>
<section class="section">
<div class="question">
<h3>
How can I get help if I'm stuck on a Frontend Mentor challenge?
</h3>
<div class="icon-img">
<img src="./assets/images/icon-plus.svg" alt="" />
</div>
</div>
<div class="answer">
<p>
The best place to get help is inside Frontend Mentor's Discord
community. There's a help channel where you can ask questions and
seek support from other community members.
</p>
</div>
<hr />
</section>
</div>
</div>
</body>
</html>
style.css 文件设置 FAQ Accordion 应用程序的样式，确保其具有视觉吸引力和响应能力。以下是一些关键样式：
* {
box-sizing: border-box;
margin: 0;
}
body {
background-color: hsl(275, 100%, 97%);
}
img {
width: 100%;
position: fixed;
}
.container {
position: absolute;
}
.box {
top: 100px;
margin: 0 auto;
background-color: hsl(0, 0%, 100%);
max-width: 555px;
position: relative;
border-radius: 13px;
padding: 20px;
}
.imageStar img {
width: 36px;
margin-left: 10px;
}
.section {
padding: 5px;
}
.question {
padding: 10px;
display: flex;
align-items: center;
justify-content: space-between;
}
.answer {
display: none;
overflow: hidden;
padding: 10px;
}
.answer.active {
display: block;
}
.icon-img {
display: flex;
align-items: center;
justify-content: center;
}
.icon-img img {
position: fixed;
width: 19px;
}
@media (max-width: 700px) {
.box {
max-width: 500px;
}
}
@media (max-width: 500px) {
.box {
max-width: 400px;
}
}
script.js 文件包含展开和折叠答案的功能。这是演示片段：
const questions = document.querySelectorAll(".question");
questions.forEach(question => {
question.addEventListener("click", () => {
const answer = question.nextElementSibling;
const icon = question.querySelector(".icon-img img");
// Toggle answer visibility
answer.classList.toggle("active");
// Change icon
if (answer.classList.contains("active")) {
icon.src = "./assets/images/icon-minus.svg";
} else {
icon.src = "./assets/images/icon-plus.svg";
}
});
});
您可以在此处查看 FAQ Accordion 项目的现场演示。
构建 FAQ Accordion 应用程序对于创建交互式且用户友好的 FAQ 部分来说是一次有益的体验。该项目强调了用户参与和内容可访问性的重要性。通过应用 HTML、CSS 和 JavaScript，我们开发了一个组件，该组件可以通过轻松访问常见问题来增强用户体验。我希望这个项目能够激励您构建自己的交互式组件。快乐编码！
这个项目是我在 Web 开发方面持续学习之旅的一部分。
以上是建立一个 FAQ 手风琴网站的详细内容。更多信息请关注PHP中文网其他相关文章！
