建立一个 FAQ 手风琴网站-css教程-PHP中文网

首页

web前端

css教程

建立一个 FAQ 手风琴网站

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 03, 2024 pm 01:33 PM

Build a FAQ Accordion Website

介绍

开发者们大家好！我很高兴分享我的最新项目：FAQ Accordion Web 应用程序。该项目非常适合那些希望为其网站创建交互式且用户友好的常见问题解答部分的人。这是使用 HTML、CSS 和 JavaScript 增强前端开发技能的好方法，同时构建可在各种应用程序中使用的实用组件。

项目概况

FAQ Accordion 是一个 Web 应用程序，旨在以可扩展和可折叠的格式显示常见问题。它采用简洁现代的设计，允许用户单击问题即可显示相应的答案。该项目展示了如何创建交互式常见问题解答部分，通过使内容易于访问来改善用户体验。

特征

交互式手风琴：用户可以点击问题来切换答案的可见性，增强内容的可读性。
响应式设计：应用程序完全响应，确保在桌面和移动设备上获得最佳的观看体验。
动态图标：图标会发生变化以指示答案是展开还是折叠。

使用的技术

HTML：提供 FAQ Accordion 应用程序的结构。
CSS：设置应用程序的样式以创建干净且响应式的设计。
JavaScript：管理交互元素，包括展开和折叠答案以及切换图标。

项目结构

以下是项目结构的概述：

FAQ-Accordion/
├── index.html
├── style.css
└── script.js

index.html：包含 FAQ Accordion 应用程序的 HTML 结构。
style.css：包含 CSS 样式以创建引人入胜且响应式的设计。
script.js：管理交互元素，例如展开和折叠答案以及更新图标。

安装

要开始该项目，请按照以下步骤操作：

克隆存储库：

git clone https://github.com/abhishekgurjar-in/FAQ-Accordion.git

打开项目目录:
```
cd FAQ-Accordion
```
运行项目:
- 在 Web 浏览器中打开 index.html 文件以查看 FAQ Accordion 应用程序。

用法

在网络浏览器中打开应用程序。
点击问题可切换答案的可见性。
展开和折叠不同的问题以查看他们的答案。
根据需要更新或添加新问题。

代码说明

超文本标记语言

index.html 文件定义了 FAQ Accordion 应用程序的结构，包括问题和答案。这是一个片段：


  
    <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>
  
  
    <div class="conatiner">
      <img src="/static/imghwm/default1.png" data-src="./assets/images/background-pattern-desktop.svg" class="lazy" alt="">
      <div class="box">
        <h1>
          FAQs
          <span class="imageStar">
            <img src="/static/imghwm/default1.png" data-src="./assets/images/icon-star.svg" class="lazy" alt=""></span>
        </h1>
        <section class="section">
          <div class="question">
            <h3 id="Is-Frontend-Mentor-free">Is Frontend Mentor free?</h3>
            <div class="icon-img">
              <img src="/static/imghwm/default1.png" data-src="./assets/images/icon-plus.svg" class="lazy" 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 id="Can-I-use-Frontend-Mentor-projects-in-my-portfolio">Can I use Frontend Mentor projects in my portfolio?</h3>
            <div class="icon-img">
              <img src="/static/imghwm/default1.png" data-src="./assets/images/icon-plus.svg" class="lazy" 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 id="Can-I-use-Frontend-Mentor-projects-in-my-portfolio">Can I use Frontend Mentor projects in my portfolio?</h3>
            <div class="icon-img">
              <img src="/static/imghwm/default1.png" data-src="./assets/images/icon-plus.svg" class="lazy" 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="/static/imghwm/default1.png" data-src="./assets/images/icon-plus.svg" class="lazy" 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>

CSS

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

JavaScript

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，我们开发了一个组件，该组件可以通过轻松访问常见问题来增强用户体验。我希望这个项目能够激励您构建自己的交互式组件。快乐编码！