首页 > 其他分享 >项目案例——常见问题collapse

项目案例——常见问题collapse

时间：2024-12-19 15:31:01浏览次数：6  
标签：常见问题 collapse 样式 faq 案例 toggle 按钮 active 区块

前言

本项目是一个常见的面板式问答交互组件，也被称为手风琴效果。点击问题标题可以展开或收起对应的答案内容。项目注重于简洁的设计和易用性，使用纯 CSS 实现展开/收起的动画效果。

学习目标

本项目主要完成学习目标：

（1）创建常见问题collapse项目文件夹

（2）明白项目实现的基本原理

（3）掌握具体的实现步骤和方法

任务一 创建常见问题collapse项目文件夹

1.1 任务描述

主要任务实现的是项目文件夹的创建。

1.2任务实施

首先我们在VSCode资源管理器下面点击文件夹如下图新建一个文件夹名字叫常见问题collapse文件夹。

创建成功后点击右键，点击新建文件命名为常见问题collapse.html, 常见问题collapse.css, 常见问题collapse.js 。如下图：

然后在VSCode中打开这个文件夹，以后常见问题collapse的项目就在对应的html、css、js文件中进行书写。

任务二 明白项目实现的基本原理

2.1 任务描述

（1）通过html和css定义多个问答内容区块和对应按钮来控制答案的展开和收起。

（2）通过js实现点击按钮控制答案内容的显示与隐藏，并根据状态切换按钮图标。

2.2 基本原理

  1. 项目通过 HTML 结构定义多个问答内容区块 (div.faq)。
  2. 每个问答区块包含一个问题标题 (h3.faq-title) 和一个答案内容 (p.faq-text)。
  3. 还包含一个按钮 (button.faq-toggle)，用来控制答案内容的展开和收起。
  4. 按钮的图标 (<i>) 使用 Font Awesome 字体图标库。
  5. CSS 样式定义了问答区块的样式、按钮的样式以及展开/收起的动画效果。
  6. JavaScript 代码通过遍历所有按钮 (faq-toggle)，为每个按钮添加点击事件监听器。
  7. 点击按钮时，会切换其父元素 (faq) 的类名 (active)，从而控制答案内容的显示和隐藏，并根据状态切换按钮的图标。

任务三 HTML框架部分

3.1页面分析

创建一个标题显示“Frequently Asked Questions” (常见问题解答)和一个容器容纳所有的问答区块，问答区块包括问题标题，答案内容，控制按钮。

3.2 任务实施

3.2.1 添加按钮图标

首先导入Font Awesome 字体图标库，添加按钮图标

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/5.14.0/css/all.min.css" />
3.2.2 创建标题

创建一个标题 (<h1>)，用来显示 “Frequently Asked Questions” (常见问题解答)。

<h1>Frequently Asked Questions</h1>

3.2.3 创建所有问答区块

创建一个容器 (div.faq-container)，用来容纳所有的问答区块。

每个问答区块 (div.faq) 包含以下内容：

  • 问题标题 (h3.faq-title)
  • 答案内容 (p.faq-text)
  • 控制按钮 (button.faq-toggle)
<div class="faq-container">
      <div class="faq active">
        <h3 class="faq-title">
          Why shouldn't we trust atoms?
        </h3>

        <p class="faq-text">
          They make up everything
        </p>

        <button class="faq-toggle">
          <i class="fas fa-chevron-down"></i>
          <i class="fas fa-times"></i>
        </button>
      </div>

      <div class="faq">
        <h3 class="faq-title">
          What do you call someone with no body and no nose?
        </h3>
        <p class="faq-text">
          Nobody knows.
        </p>
        <button class="faq-toggle">
          <i class="fas fa-chevron-down"></i>
          <i class="fas fa-times"></i>
        </button>
      </div>
      
      <div class="faq">
        <h3 class="faq-title">
          What's the object-oriented way to become wealthy?
        </h3>
        <p class="faq-text">
          Inheritance.
        </p>
        <button class="faq-toggle">
          <i class="fas fa-chevron-down"></i>
          <i class="fas fa-times"></i>
        </button>
      </div>
      
      <div class="faq">
        <h3 class="faq-title">
          How many tickles does it take to tickle an octopus?
        </h3>
        <p class="faq-text">
          Ten-tickles!
        </p>
        <button class="faq-toggle">
          <i class="fas fa-chevron-down"></i>
          <i class="fas fa-times"></i>
        </button>
      </div>
      
      <div class="faq">
        <h3 class="faq-title">
          What is: 1 + 1?
        </h3>
        <p class="faq-text">
          Depends on who are you asking.
        </p>
        <button class="faq-toggle">
          <i class="fas fa-chevron-down"></i>
          <i class="fas fa-times"></i>
        </button>
      </div>
    </div>

任务四 CSS样式部分

4.1 页面分析

定义整体样式，为问答区块（div.faq）定义样式，包括背景色、边框、圆角、间距、填充等，定义内容展开/收起过程的动画效果，另外定义激活状态下的问答区块样式(faq.active)。

4.2 任务实施

4.2.1页面整体样式

定义整体的样式 (body, h1)。

* {
  box-sizing: border-box;
}
 
body {
  font-family: 'Muli';
  background-color: #f0f0f0;
}
 
h1 {
  margin: 50px 0 30px;
  text-align: center;
}
  • box-sizing: border-box;:设置所有元素的盒子模型为 border-box，这意味着元素的宽度和高度包括边框和内边距。
  • font-family: 'Muli';：设置字体为无衬线字体。
  • text-align: center;：将元素内的文本水平居中对齐。
  • margin: 50px 0 30px;：设置元素外边距。从左到右依次是上、右、左、下（顺时针进行）
4.2.2 问答区块样式

设置问答区块的样式 (div.faq)，包括背景色、边框、圆角、间距、填充等。使用 transition 属性定义内容展开/收起过程的动画效果。

.faq-container {
  max-width: 600px;
  margin: 0 auto;
}
 
.faq {
  background-color: transparent;
  border: 1px solid #9fa4a8;
  border-radius: 10px;
  margin: 20px 0;
  padding: 30px;
  position: relative;
  overflow: hidden;
  transition: 0.3s ease;
}
  • background-color: transparent; ：将元素背景颜色设置为透明。
  • .faq元素被设置为position: relative;，其内部的::before和::after伪元素设置为position: absolute;（当.faq处于.active状态时）可以精确地相对于.faq进行定位。这正是“子绝父相”定位的典型应用。
  • overflow :hidden;:隐藏溢出内容。
4.2.3定义激活状态下的问答区块样式
  • 使用伪元素 (::before 和 ::after) 在激活状态下添加额外的装饰性图标。
  • 设置问题标题 (h3.faq-title) 和 答案内容 (p.faq-text) 的样式。
  • 设置按钮的样式 (button.faq-toggle)，并定义激活状态下按钮图标的切换 (faq.active .faq-toggle).

/* 活动状态下常见问题的样式 */
.faq.active {
  background-color: #fff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.1);
}

/* 活动状态下插入图标的样式 */
.faq.active::before,
.faq.active::after { 
  /* 插入图标 */
  content: '\f075';
  font-family: 'Font Awesome 5 Free';
  color: #2ecc71;
  font-size: 7rem;
  position: absolute;
  opacity: 0.2;
  top: 20px;
  left: 20px;
  z-index: 0;
}

/* 活动状态下前图标的特定样式 */
  .faq.active::before {
  color: #3498db;
  top: -10px;
  left: -30px;
  transform: rotateY(180deg);
} 

/* 常见问题标题的样式 */
.faq-title {
  margin: 0 35px 0 0;
}

/* 常见问题文本的基本样式 */
.faq-text {
  display: none;
  margin: 30px 0 0;
}

/* 活动状态下常见问题文本的显示 */
.faq.active .faq-text {
  display: block;
}

/* 常见问题切换的样式 */
.faq-toggle {
  background-color: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  padding: 0;
  position: absolute;
  top: 30px;
  right: 30px;
  height: 30px;
  width: 30px;
}

/* 焦点状态下切换按钮的样式 */
.faq-toggle:focus { 
/* 设置轮廓宽度为0，不可见 */
  outline: 0;
}

/* 切换按钮的“关闭”图标的样式 */
.faq-toggle .fa-times { 
  /* 设置元素不显示 */
  display: none;     
}

/* 活动状态下显示“关闭”图标 */
.faq.active .faq-toggle .fa-times {
  color: #fff;
  display: block;
}

/* 活动状态下隐藏“向下箭头”图标 */
.faq.active .faq-toggle .fa-chevron-down {
  display: none;
}

/* 活动状态下切换按钮的样式 */
.faq.active .faq-toggle {
  background-color: #9fa4a8;
}
  • transform: rotateY(180deg);：绕Y轴旋转180度
  • transition: 0.3s ease; ： 过渡效果持续0.3秒，并且使用ease缓动函数。它表示开始时速度较慢，然后加快，最后再减慢。提供了平滑且自然的动画效果。

任务五  JavaScript 代码

5.1 任务目标

获取所有控制按钮的 DOM 元素集合 (querySelectorAll)，遍历每个按钮，并为其添加点击事件监听器。点击按钮时，触发事件监听器函数，该函数通过切换父元素 (faq) 的类名 (active) 来控制内容的显隐，并根据状态调整按钮图标。

5.2 任务实施

5.2.1 获取所有切换按钮

使用document.querySelectorAll方法选择页面上所有具有.faq-toggle类的元素，并将它们存储在一个名为toggles的常量中。querySelectorAll返回的是一个NodeList对象，它类似于数组，但不是一个真正的数组。不过，它有一个forEach方法，可以用于遍历节点列表。

5.2.2 遍历每个元素

使用forEach方法遍历toggles中的每个元素。每次迭代时，当前元素被传递给箭头函数，这里的参数被命名为toggle。

toggles.forEach(toggle => {
   ……
})
5.2.3 添加点击事件监听器

为每个toggles数组中的元素添加一个点击事件监听器。当这些元素中的任何一个被点击时，它们各自的父节点的类列表（classList）会切换一个名为'active'的类。这通常用于改变UI元素的样式，以响应用户的交互。

对于toggles数组中的每个toggle元素，都使用addEventListener方法添加一个点击事件监听器。当toggle元素被点击时，会执行传递给addEventListener的箭头函数。在这个函数中，toggle.parentNode获取toggle元素的父节点，然后.classList.toggle('active')被调用以切换父节点的'active'类。

// 对每个切换按钮添加点击事件监听器
toggles.forEach(toggle => {
    // 在点击时切换父节点的活动状态
    toggle.addEventListener('click', () => {
        toggle.parentNode.classList.toggle('active')
    })
})

任务六 对项目进行整合

全部代码编写完成后，在html中进行引用。 注意引用位置！！！

<link rel="stylesheet" href="常见问题.css">
<body>……</body>
<script src="常见问题.js"></script>

本项目中，巧妙地利用了伪元素在激活状态下呈现额外的装饰性图标，配合 transition 属性的设定，实现了内容展开/收起的视觉反馈效果。

最终实现效果

点击问题标题可以展开或收起对应的答案内容。

标签：常见问题,collapse,样式,faq,案例,toggle,按钮,active,区块
From： https://blog.csdn.net/2401_86247055/article/details/144585957

相关文章

  • 第四天案例练习-banner效果
    Banner设计：是一种用于展示品牌、产品或服务信息的网络广告设计。通常以横幅的形式出现在网页或移动端屏幕的顶部，也可以在社交媒体平台上使用<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-wi......
  • JavaWeb笔记（项目案例-部门员工管理、文件上传）
    项目环境搭建资料接口文档在Day10三层架构controller:负责接受请求,处理响应service:逻辑处理,为了增强程序灵活性,方便层与层之间解耦,我们会采用面向接口的方式,还需要准备业务层的接口,mapper本身就是一个接口mapper:数据访问操作环境搭建部门实......
  • JavaWeb笔记（项目案例-登录功能、登录校验、异常处理）
    资料登录功能步骤DeptController的请求路径都是/Dept开头的EmpController的请求路径都是/Emp开头的UploadController是用来文件上传的那么LoginController就是用来登录的注意功能走的其实是emp实体类注意mapper接口中的方法名问题,login是登录,是一个业务方法,但是......
  • 第四天案例联系-热词
      效果：五个热词点击可以跳转到指定页面，悬停时有颜色区别遇到问题：文字在各个块中水平，垂直居中显示①水平显示：text-align：center【注意：要注意将这个属性设置到父级元素】②垂直显示：line-height：80px【通过行高来设置，将行高设置与块的大小一样】 <!DOCTYPEhtml><h......
  • UML活动图建模-官网案例-Hospital Management
    The ElectronicPrescriptionService enables prescribers -suchasgeneralpractitioners(GPs)andpracticenurses-tosendprescriptionselectronicallytoa dispenser (suchasapharmacy)ofthepatient'schoice.AswithallNHSConnectingforHeal......
  • PagePlug场景案例（二）——5分钟开发一个H5表单页面
    一、背景PagePlug是appsmith中国化项目，一款面向研发开发使用、开源的、前后端一体的低代码工具，拥有强大的可视化建模、数据库和API集成能力，目前已有将近超千家企业将PagePlug低代码开发工具融入内部研发体系，相较于传统的产研开发，使用PagePlug可大幅提升研发效率，节省项目迭代维......
  • Linux内存泄露案例分析和内存管理分享
    作者：京东科技李遵举一、问题近期我们运维同事接到线上LB（负载均衡）服务内存报警，运维同事反馈说LB集群有部分机器的内存使用率超过80%，有的甚至超过90%，而且内存使用率还再不停的增长。接到内存报警的消息，让整个团队都比较紧张，我们团队负责的LB服务是零售、物流、科技等业务服务的流......
  • MSTP+VRRP典型案例(二层)
    拓扑图接口说明VLAN10对应的网段为192.168.10.0/24；VLAN20对应的网段为192.168.20.0/24；VLAN30对应的网段为192.168.30.0/24；VLAN40对应的网段为192.168.40.0/24；各VLAN的网关均为.254的地址，该地址为VRRP组的虚拟地址；LSW1的vlanif10和vlanif20的IP地址分别为：192.168.10.253......
  • 企业如何快速搭建大模型？2024中国AI大模型行业案例资源【限时分享】
    AI大模型行业正处于快速发展阶段，其技术进步和应用场景的不断拓展不仅为企业带来了新的发展机遇，也为社会经济发展注入了新动能。面对这一变革，企业和个人都需要积极适应变化，抓住机遇，共同推动AI大模型行业的健康发展。为了帮助大家更快的了解和掌握大模型，今天给大家推荐一份非......
  • 中国气象局：2024年第二批“气象数据要素×”典型案例（附下载）
    11月25日，中国气象局通报2024年第二批“气象数据要素×”典型案例。此次遴选充分结合首届“数据要素×”大赛获奖案例，旨在进一步号召各级气象部门充分学习借鉴先进经验和做法，持续推动高价值气象数据产品开发利用，挖掘气象数据要素应用场景，充分发挥气象数据要素乘数效应，更好赋能经......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99