開發者們大家好！我很高興分享我的最新專案：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中文網其他相關文章！
