目录😋
介绍
本次挑战需要实现图片折叠的效果，请使用 jQuery 语法完成代码。
准备
本题已经内置了初始代码，打开实验环境，目录结构如下：
├── css │ └── style.css ├── images │ ├── pic1.jpeg │ ├── pic2.jpeg │ ├── pic3.jpeg │ ├── pic4.jpeg │ └── pic5.jpeg ├── js │ ├── index.js │ └── jquery-3.6.0.min.js └── index.html
其中：
css/style.css是页面样式文件。images是项目所用到的图片文件夹。js是放置 js 代码的文件夹。index.html是页面布局。选中
index.html右键启动 Web Server 服务（Open with Live Server），让项目运行起来。打开环境右侧的【Web 服务】，就可以在浏览器中看到当前页面，点击图片，被折叠的图片不会展开。
目标
请完善
index.js文件，让页面具有如下所示的效果：
规定
- 请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径等。
- 满足题目需求后，保持 Web 服务处于可以正常访问状态，点击「提交检测」系统会自动判分。
通关代码✔️
//index.js $(function() { $(".option").click(function() { $(this).addClass("active"); $(this).siblings().removeClass("active"); }); });
代码解析📑
1. HTML 部分
//index.html <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./css/style.css"> </head> <body> <div class="options"> <div class="option active" style="--optionBackground:url(../images/pic1.jpeg);" id="item1"> <div class="shadow"></div> </div> <div class="option" style="--optionBackground:url(../images/pic2.jpeg);" id="item2"> <div class="shadow"></div> </div> <div class="option" style="--optionBackground:url(../images/pic3.jpeg);" id="item3"> <div class="shadow"></div> </div> <div class="option" style="--optionBackground:url(../images/pic4.jpeg);" id="item4"> <div class="shadow"></div> </div> <div class="option" style="--optionBackground:url(../images/pic5.jpeg);" id="item5"> <div class="shadow"></div> </div> </div> <script src="./js/jquery-3.6.0.min.js"></script> <script src="./js/index.js"></script> </body> </html>
解释：
<!DOCTYPE html>：声明文档类型为 HTML5。<html lang="en">：表示 HTML 文档的语言为英语。<head>部分：
<meta charset="UTF-8">：指定文档的字符编码为 UTF-8，确保支持多种字符集。<meta name="viewport" content="width=device-width, initial-scale=1.0">：设置视口信息，让页面根据设备宽度进行缩放，初始缩放比例为 1.0，提高移动设备的浏览体验。<title>Document</title>：设置页面的标题。<link rel="stylesheet" href="./css/style.css">：引入外部的 CSS 样式文件，将style.css文件应用到页面，为页面添加样式。
<body>部分：
<div class="options">：一个容器元素，用于包含多个.option元素。<div class="option">：代表手风琴的一个选项，每个选项都包含一张图片。
style="--optionBackground:url(../images/pic1.jpeg);"：使用自定义 CSS 变量--optionBackground为元素设置背景图片。<div class="shadow"></div>：可能用于添加阴影效果的子元素。
<script src="./js/jquery-3.6.0.min.js"></script>：引入 jQuery 库，为使用 jQuery 语法提供支持。<script src="./js/index.js"></script>：引入自定义的 JavaScript 文件，包含实现手风琴功能的逻辑。
2. CSS部分
/*style.css*/ body { display: flex; flex-direction: row; justify-content: center; align-items: center; overflow: hidden; height: 100vh; transition: 0.25s; } body .options { display: flex; flex-direction: row; align-items: stretch; overflow: hidden; min-width: 600px; max-width: 900px; width: calc(100% - 100px); height: 400px; } @media screen and (max-width: 718px) { body .options { min-width: 520px; } body .options .option:nth-child(5) { display: none; } } @media screen and (max-width: 638px) { body .options { min-width: 440px; } body .options .option:nth-child(4) { display: none; } } @media screen and (max-width: 558px) { body .options { min-width: 360px; } body .options .option:nth-child(3) { display: none; } } @media screen and (max-width: 478px) { body .options { min-width: 280px; } body .options .option:nth-child(2) { display: none; } } body .options .option { position: relative; overflow: hidden; min-width: 60px; margin: 10px; background: var(--optionBackground); background-size: auto 120%; background-position: center; cursor: pointer; transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95); } body .options .option.active { flex-grow: 10000; transform: scale(1); max-width: 600px; margin: 0px; border-radius: 40px; background-size: auto 100%; } body .options .option.active .shadow { box-shadow: inset 0 -120px 120px -120px black, inset 0 -120px 120px -100px black; } body .options .option:not(.active) { flex-grow: 1; border-radius: 30px; } body .options .option:not(.active) .shadow { bottom: -40px; box-shadow: inset 0 -120px 0px -120px black, inset 0 -120px 0px -100px black; } body .options .option .shadow { position: absolute; bottom: 0px; left: 0px; right: 0px; height: 120px; transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95); }
解释：
body部分：
display: flex; flex-direction: row; justify-content: center; align-items: center;：将body元素设置为水平方向的弹性布局，使内容在水平和垂直方向上居中。overflow: hidden;：隐藏溢出部分，防止内容超出视口。height: 100vh;：将body的高度设置为视口高度的 100%。transition: 0.25s;：添加过渡效果，让元素的属性变化更平滑。
body.options部分：
display: flex; flex-direction: row; align-items: stretch;：将.options容器设置为水平方向的弹性布局，并让子元素拉伸以填充容器的高度。overflow: hidden;：隐藏子元素的溢出部分。min-width: 600px; max-width: 900px; width: calc(100% - 100px); height: 400px;：设置.options容器的宽度和高度，并设置最小和最大宽度。
@media部分：
- 这是媒体查询，用于响应式设计，根据不同的屏幕宽度调整
.options容器的最小宽度，并隐藏相应的.option元素。
body.options.option部分：
position: relative; overflow: hidden; min-width: 60px; margin: 10px;：设置.option元素的基本样式，如相对定位、最小宽度和外边距。background: var(--optionBackground);：使用自定义 CSS 变量设置背景图片。background-size: auto 120%; background-position: center;：设置背景图片的大小和位置。cursor: pointer;：将鼠标指针样式设置为手型，提示用户可以点击。transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);：添加过渡效果。
body.options.option.active部分：
flex-grow: 10000; transform: scale(1); max-width: 600px; margin: 0px; border-radius: 40px; background-size: auto 100%;：当.option元素具有.active类时，它会扩展以填充更多空间，进行缩放和改变外观。
body.options.option.active.shadow部分：
box-shadow: inset 0 -120px 120px -120px black, inset 0 -120px 120px -100px black;：为激活的.option元素的.shadow子元素添加阴影效果。
body.options.option:not(.active)部分：
flex-grow: 1; border-radius: 30px;：未激活的.option元素会有不同的大小和外观。
body.options.option:not(.active).shadow部分：
bottom: -40px; box-shadow: inset 0 -120px 0px -120px black, inset 0 -120px 0px -100px black;：未激活的.option元素的.shadow子元素有不同的位置和阴影效果。
3. JavaScript 部分
$(function() { $(".option").click(function() { $(this).addClass("active"); $(this).siblings().removeClass("active"); }); });
解释：
$(function() {...})：这是 jQuery 的文档就绪函数，等同于$(document).ready(function() {...})，确保在文档的 DOM 结构加载完成后才开始执行其中的代码。$(".option").click(function() {...})：使用 jQuery 的选择器$(".option")选中所有类名为option的元素，并为它们添加点击事件处理函数。$(this).addClass("active");：当用户点击一个.option元素时，$(this)指代被点击的元素，使用addClass("active")为该元素添加active类，使其处于激活状态。$(this).siblings().removeClass("active");：使用siblings()方法找到被点击元素的兄弟元素，使用removeClass("active")移除它们的active类，确保同一时间只有一个元素处于激活状态。4. 工作流程 ▶️
- 初始状态：
- HTML 部分创建了多个选项元素，部分元素添加了
active类。- CSS 部分为元素设置了基本样式，包括布局、背景、阴影和过渡效果。具有
active类的元素使用flex-grow占据更多空间，其他元素占据较少空间。- 页面通过 Flex 布局和媒体查询实现了基本的布局和响应式设计。
- 用户交互：
- 当用户点击某个
.option元素时，JavaScript 部分的点击事件处理函数会触发。- 被点击的元素会添加
active类，其兄弟元素的active类会被移除。
- 样式更新：
- 由于 CSS 中对
.option.active和.option:not(.active)有不同的样式设置，添加active类的元素会展开，其宽度、圆角、阴影等样式会更新，通过过渡效果实现平滑的展开动画。- 移除
active类的元素会收缩，样式也会相应改变，实现收缩动画。
- 响应式调整：
- 不同的媒体查询会根据设备的屏幕宽度隐藏部分元素，确保在不同屏幕尺寸下页面的布局和显示效果。
综上所述，HTML 负责页面结构，CSS 负责页面样式和布局，JavaScript 负责处理用户点击事件，三者协同工作，实现了一个带有响应式功能的折叠手风琴效果。
测试结果👍
