繼續開源開發

大家好，在這個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中文網其他相關文章！