构建响应式手风琴界面

简介

在这个项目中，你将学习如何使用 HTML、CSS 和 JavaScript 创建一个简单的折叠式手风琴。折叠式手风琴是一种常见的用户界面 (UI) 元素，它允许用户展开和折叠内容部分，这使其成为以紧凑且有条理的方式显示信息的实用功能。

👀 预览

🎯 任务

在这个项目中，你将学习：

• 如何为折叠式手风琴设置 HTML 结构
• 如何使用 CSS 对其进行样式设计
• 如何使用 JavaScript 为手风琴添加交互性

🏆 成果

完成这个项目后，你将能够：

• 创建一个响应式且视觉上吸引人的手风琴界面
• 使用 JavaScript 为网页元素添加交互性和动态行为
• 整合 HTML、CSS 和 JavaScript 来构建一个功能齐全且用户友好的网页组件

Skills Graph

设置项目结构

在这一步中，你将通过在编辑器中打开提供的文件来设置项目。

1. 打开编辑器，你应该会看到以下文件：index.html、style.css、index.js 和 jquery-3.6.0.min.js。
2. 点击 WebIDE 右下角的 Go Live 按钮来运行项目。
3. 在虚拟机顶部打开 “Web 8080” 并手动刷新以查看页面。点击折叠页面上的图像不会展开它。你可以如下查看：

使用 jQuery 添加交互性

在这一步中，你将使用 jQuery 为手风琴添加交互性。

1. 在编辑器中打开 index.js 文件。
2. 添加以下代码：

$(".option").click(function () {
  $(".option").removeClass("active");
  $(this).addClass("active");
});

这段代码为每个 .option 元素添加了一个点击事件监听器。当一个 .option 被点击时，代码会从所有 .option 元素中移除 active 类，并将 active 类添加到被点击的 .option 元素上。这将根据需要折叠或展开手风琴。

3. 保存 index.js 文件。
4. 刷新浏览器以查看最终结果。
5. 点击不同的手风琴选项以查看它们的展开和折叠。

效果如下所示：

恭喜！你已完成折叠式手风琴项目。

总结

恭喜！你已完成这个项目。你可以在 LabEx 中练习更多实验来提升你的技能。