继续开源开发

大家好，在这个0.3版本中，我主要关注两个主要任务。我选择解决的第一个 Pull Request 涉及为 Dazzle-and-Delight 项目实现响应式导航栏。

项目概况

Dazzle-and-Delight 存储库托管一个基于 Web 的事件管理平台。该平台允许用户浏览有关过去和即将发生的事件的信息。该网站是使用 JavaScript、HTML 和 CSS 构建的，包含大约七个页面，需要更新以确保导航栏在各种屏幕尺寸上完全响应。

工作详情

虽然项目本身相对简单，但这项任务所需的工作范围更大。具体来说，我需要实现一个响应式导航栏，可以适应较小的屏幕尺寸（例如手机和平板电脑）。

为了解决这个问题，我引入了一个汉堡菜单，单击该菜单时，会显示导航部分的垂直列表。此菜单仅在宽度为 768px 或更小的屏幕尺寸上显示。此次实施共涉及更新 14 个文件。

为了更好的代码组织和易于调试，我创建了一个新文件 navbar_menu.js，它处理菜单按钮的事件侦听器：

document.getElementById('menu-bar').addEventListener('click', function () {
  console.log('click');
  document.getElementById('section-list').style.display =
    document.getElementById('section-list').style.display === 'none'
      ? 'block'
      : 'none';
});

document.getElementById('close-menu-btn').addEventListener('click', function () {
  document.getElementById('section-list').style.display = 'none';
});

我的 PR：使导航栏响应

每个 HTML 文件的实施步骤：

使用 > 添加一个部分元素

包含脚本 位于每个 HTML 文件的底部。该脚本管理用户交互时垂直导航菜单的显示/隐藏功能。

结论：

虽然项目本身并不太复杂，但受此更改影响的文件数量带来了相当大的挑战。与本课程中之前的 Pull 请求相比，此任务需要更广泛的文件修改。尽管这可能不是我所承担的技术上最困难的任务，但所做的更新量表明了我在开源贡献方面的进展。

以上是继续开源开发的详细内容。更多信息请关注PHP中文网其他相关文章！