50天50个前端小项目（纯html+css+js）第十二天（FAQ 问题与回答框）

最新推荐文章于 2023-08-16 17:55:49 发布

mzldustu

最新推荐文章于 2023-08-16 17:55:49 发布

阅读量627

点赞数

分类专栏： 50Day50前端基础小项目(纯三件套) 文章标签： 1024程序员节 javascript css html

本文链接：https://blog.csdn.net/qq_45628733/article/details/127492235

版权

在10.24程序员节快乐的气氛中，博主分享了一篇教程，教大家如何使用HTML、CSS和JavaScript创建一个问答框。该问答框通过按钮控制问题答案的显示与隐藏。CSS部分亮点在于用纯CSS绘制了聊天框的图标。JavaScript中的parentNode属性用于获取元素的父节点，并结合classList.toggle实现显示和隐藏效果。源代码可在Gitee上找到。

摘要由CSDN通过智能技术生成

大家10.24程序员节快乐啊！
前两天摸了两天，嘿嘿，怪不好意思的。
今天我们来做一个问答框，就是根据按钮显示和关闭回答！
先看效果：
在这里插入图片描述

就是能自主控制问题答案的显示：
来直接看代码：
html部分：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
    <link rel="stylesheet" href="style.css" />
    <title>FAQ</title>
  </head>
  <body>
    <h1>Frequently Asked Questions</h1>
    <div class="faq-container">
      <div class="faq active">
        <h3 class="faq-title">
          为什么你要天天吃饭?
        </h3>

        <p class="faq-text">
          因为要活着。
        </p>
        <!-- 下拉框和关闭框 -->
        <button class="faq-toggle"</