第 10 堂｜完成手機導覽與作品集互動
清除搜尋與分類，再讓三頁導覽在手機與鍵盤都能順暢使用。
兩支腳本，各自負責一件事
分清作品篩選狀態與三頁導覽狀態。
先準備
- 自己正常portfolio的index.html、works.html、services.html、完整styles.css
- 本機圖片、既有六筆資料；變更前副本與自己的Git基準
- 七筆projects.js、四步條件表與三頁script標籤
projects.js負責作品搜尋與清除；navigation.js負責三頁選單。button執行開關，a前往位置；保留這個分工才不會為了修選單改壞搜尋。
button aria-controls="site-navigation"
aria-expanded="false"
nav id="site-navigation"跟著觀察
- 指出哪支腳本負責作品、哪支負責選單。
- 看全部、分類與keyword需要一起重設的值。
- 辨認button執行動作與a導覽的差別。
做完，自己確認
- 分清作品篩選狀態與三頁導覽狀態。
- 能指出指定檔案與作用範圍。
把條件與導覽準備好
新增完整清除與三頁原生手機選單。
先準備
- 自己正常portfolio的index.html、works.html、services.html、完整styles.css
- 本機圖片、既有六筆資料；變更前副本與自己的Git基準
- 七筆projects.js、四步條件表與三頁script標籤
親手改零筆提示為「沒有符合條件的作品，請試著換個關鍵字或分類。」再請AI補清除與手機選單。
跟著做
- 先寫四步：全部七筆、交集一筆、零筆、清除七筆。
- 用生成Prompt加入清除按鈕及三頁共用navigation.js。
- 在390與1280操作，實際用Tab／Enter／Space／Escape測選單。
建立清除與三頁手機導覽
主要使用 Cursor 內建 AI；先附資料，再送出指令。
- 1．附上這些檔案與資料
- 自己正常portfolio的index.html、works.html、services.html、完整styles.css
- 本機圖片、既有六筆資料；變更前副本與自己的Git基準
- 七筆projects.js、四步條件表與三頁script標籤
- 2．貼到哪裡
- 在 Cursor 開啟自己的本關練習副本，進入內建 AI 對話；正常版與故障副本分開。
- 用 @ 附上本關指定檔案，核對完整路徑；補實際觀察、輸入與結果，再貼下方 Prompt。
- 先讀回覆與差異，只保存指定範圍；回到瀏覽器實際檢查。版本保存由自己操作，不讓 AI 代替驗收或提交。
- 3．預期回覆與操作
- 清除完整重設篩選；選單button狀態與顯示一致。
- 三頁共用navigation.js，作品事件不受影響。
- 4．自己檢查結果
- 清除後七筆、分類全部、keyword空白。
- 三頁Enter／Space／Escape及桌面導覽可操作。
建立清除與三頁手機導覽 Prompt（可收合）
你是協助零基礎學員的網站開發助手。我使用 Cursor 免費版編輯原生 HTML、CSS、JavaScript；必要時把你提供的內容手動貼入檔案。
情境與本次輸入：承接第9堂七筆資料的搜尋作品頁。新增三頁共用navigation.js，699px以下用原生button控制site-navigation，700px起導覽可見。加入本頁內容#main連結供同頁關閉驗收；作品搜尋仍由projects.js管理。APPA、紫綠tokens與原網格保留。
本次任務：保留七筆作品搜尋，加入清除條件button，同時重設keyword、category、aria-pressed與筆數，清除後聚焦搜尋框。新增navigation.js管理三頁共用原生button，aria-controls=site-navigation、aria-expanded同步；699px以下收合、700px起導覽可見。Enter／Space原生可開關，Escape關閉且還焦點，尺寸切換重設窄版狀態。三頁nav保留原href並新增本頁內容#main連結供測試；這次先不加點連結收起。未啟用JS時導覽仍可見。各腳本只載入一次，保留APPA、色票、網格與既有焦點，不加遮罩、框架或登入。列四步篩選與三頁鍵盤驗收。
請先閱讀我附上的相關檔案或資料，資訊缺漏時精確列出需要補充的項目，不猜檔名、API 或測試結果。說明以繁體中文撰寫，指出檔案與修改位置；檢查結果區分已知、待驗與未完成。只處理學生自己的練習副本，不改現有展示網站，不要求付費訂閱。Cursor AI 無法使用？改用 ChatGPT 備援
把上方指定的檔案內容、清單與補充資料，連同同一份 Prompt 貼入 ChatGPT 對話。只貼電腦上的路徑，無法讓它讀取你的檔案。
收到程式碼時，先核對檔名與修改位置，再手動存回自己的練習副本；若收到檢查表或補檔步驟，就逐項操作。不要把 Prompt 或程式碼框的反引號貼進 HTML／CSS。
兩邊都受限時，可先看既有參考成果、檢查差異與手動修改；未做過的 AI 生成或公開發布仍記待完成。不要貼入帳密、金鑰或真實個資。
複製只取得 Prompt 文字，檔案需自行在 Cursor 附上；本頁不會呼叫 AI 或自動完成關卡。
保留導覽，再同步收合狀態
頁內與跨頁都能前往，選單不擋閱讀。
先準備
- 自己的三頁HTML、navigation.js與原CSS
- 390px選本頁內容的重現步驟與aria-expanded狀態
點連結不能只關選單卻忘記導覽。保留href預設行為，在窄版選到連結後同步aria-expanded與顯示狀態，桌面不套收合。
nav.addEventListener('click',event=>{
if(event.target.closest('a') && narrow.matches) setOpen(false);
});跟著觀察
- 在階段01打開選單，選本頁內容觀察收合狀態。
- 指出不應preventDefault取消原href。
- 比較390與1280是否需要同一個收合行為。
做完，自己確認
- 頁內與跨頁都能前往，選單不擋閱讀。
- 能指出指定檔案與作用範圍。
選到內容，就把路讓出來
完成選後收合，保留原導覽與焦點。
先準備
- 自己的三頁HTML、navigation.js與原CSS
- 390px選本頁內容的重現步驟與aria-expanded狀態
親手用鍵盤走到本頁內容連結，記錄目前狀態，再讓AI只補選後收合。
跟著做
- 390px開啟選單，選本頁內容#main，記實際結果。
- 用修改Prompt只補選到導覽連結後收起。
- 測三頁與桌面，確認搜尋、Escape與焦點仍正常。
只補選到連結後收起選單
主要使用 Cursor 內建 AI；先附資料，再送出指令。
- 1．附上這些檔案與資料
- 自己的三頁HTML、navigation.js與原CSS
- 390px選本頁內容的重現步驟與aria-expanded狀態
- 2．貼到哪裡
- 在 Cursor 開啟自己的本關練習副本，進入內建 AI 對話；正常版與故障副本分開。
- 用 @ 附上本關指定檔案，核對完整路徑；補實際觀察、輸入與結果，再貼下方 Prompt。
- 先讀回覆與差異，只保存指定範圍；回到瀏覽器實際檢查。版本保存由自己操作，不讓 AI 代替驗收或提交。
- 3．預期回覆與操作
- 只改navigation.js一個連結事件。
- 不取消導覽，不改桌面與作品事件。
- 4．自己檢查結果
- 390px選#main後關閉、aria-expanded=false，內容可讀。
- 三頁連結、桌面導覽、Escape及搜尋保留。
只補選到連結後收起選單 Prompt（可收合）
你是協助零基礎學員的網站開發助手。我使用 Cursor 免費版編輯原生 HTML、CSS、JavaScript；必要時把你提供的內容手動貼入檔案。
情境與本次輸入：承接第9堂七筆資料的搜尋作品頁。新增三頁共用navigation.js，699px以下用原生button控制site-navigation，700px起導覽可見。加入本頁內容#main連結供同頁關閉驗收；作品搜尋仍由projects.js管理。APPA、紫綠tokens與原網格保留。
本次任務：只在navigation.js加入窄版選到nav內有效a後setOpen(false)，同步aria-expanded與nav顯示；保留原href與預設導覽，不preventDefault，不改作品搜尋、清除、CSS或資料。以本頁內容#main驗證同頁收合，再實測三頁跨頁；Escape還焦點、Enter／Space及700px以上桌面可見都保留。提供最小差異與390／1280回歸。
請先閱讀我附上的相關檔案或資料，資訊缺漏時精確列出需要補充的項目，不猜檔名、API 或測試結果。說明以繁體中文撰寫，指出檔案與修改位置；檢查結果區分已知、待驗與未完成。只處理學生自己的練習副本，不改現有展示網站，不要求付費訂閱。Cursor AI 無法使用？改用 ChatGPT 備援
把上方指定的檔案內容、清單與補充資料，連同同一份 Prompt 貼入 ChatGPT 對話。只貼電腦上的路徑，無法讓它讀取你的檔案。
收到程式碼時，先核對檔名與修改位置，再手動存回自己的練習副本；若收到檢查表或補檔步驟，就逐項操作。不要把 Prompt 或程式碼框的反引號貼進 HTML／CSS。
兩邊都受限時，可先看既有參考成果、檢查差異與手動修改；未做過的 AI 生成或公開發布仍記待完成。不要貼入帳密、金鑰或真實個資。
複製只取得 Prompt 文字，檔案需自行在 Cursor 附上；本頁不會呼叫 AI 或自動完成關卡。
同一個動作，不能註冊兩次
用事件證據找出開了又關的原因。
先準備
- fault-L10三頁script標籤與完整navigation.js
- 390px一次點擊與狀態變化、正常版對照
兩個不同匿名click監聽都切換同一狀態，會一次開啟再關閉。用延遲或換動畫不會解決重複註冊；只去掉多餘事件即可。
toggle.addEventListener('click',()=>setOpen(!isOpen));
// 若又加不同匿名listener，就會切兩次。跟著觀察
- 正常版一次開一次關，記aria-expanded。
- 故障版看一點就回false的現象。
- 核對三頁script與navigation.js裡的註冊來源。
做完，自己確認
- 用事件證據找出開了又關的原因。
- 能指出指定檔案與作用範圍。
一次點擊，只做一次
修復重複事件，完成作品集功能版檢查。
先準備
- fault-L10三頁script標籤與完整navigation.js
- 390px一次點擊與狀態變化、正常版對照
先自己數script與click註冊，記錄一次點擊的狀態變化，再使用修正Prompt。
跟著做
- 獨立fault-L10重現一次點擊開又關。
- 限定AI移除重複匿名click，不重寫選單。
- 測連續點按、Enter／Space／Escape、切尺寸與作品四步。
修復重複選單事件
主要使用 Cursor 內建 AI；先附資料，再送出指令。
- 1．附上這些檔案與資料
- fault-L10三頁script標籤與完整navigation.js
- 390px一次點擊與狀態變化、正常版對照
- 2．貼到哪裡
- 在 Cursor 開啟自己的本關練習副本，進入內建 AI 對話；正常版與故障副本分開。
- 用 @ 附上本關指定檔案，核對完整路徑；補實際觀察、輸入與結果，再貼下方 Prompt。
- 先讀回覆與差異，只保存指定範圍；回到瀏覽器實際檢查。版本保存由自己操作，不讓 AI 代替驗收或提交。
- 3．預期回覆與操作
- 只移除多餘匿名click，正常事件保留。
- 其他操作與資料完全保留。
- 4．自己檢查結果
- 一次開、再點關，沒有重複切換。
- 鍵盤、選後收合、桌面與搜尋清除回歸正常。
修復重複選單事件 Prompt（可收合）
你是協助零基礎學員的網站開發助手。我使用 Cursor 免費版編輯原生 HTML、CSS、JavaScript；必要時把你提供的內容手動貼入檔案。
情境與本次輸入：承接第9堂七筆資料的搜尋作品頁。新增三頁共用navigation.js，699px以下用原生button控制site-navigation，700px起導覽可見。加入本頁內容#main連結供同頁關閉驗收；作品搜尋仍由projects.js管理。APPA、紫綠tokens與原網格保留。
本次任務：獨立故障副本一次點手機選單會開後立即關閉。依附script標籤與navigation.js確認末端多出的一個匿名click監聽，僅移除該重複註冊，保留原監聽與setOpen。不加入延遲、額外狀態或重寫全站，不改projects.js、CSS與資料。列一次及連續開關、Enter／Space／Escape、#main與跨頁、390→1280→390、作品搜尋與清除回歸，未操作結果待填。
請先閱讀我附上的相關檔案或資料，資訊缺漏時精確列出需要補充的項目，不猜檔名、API 或測試結果。說明以繁體中文撰寫，指出檔案與修改位置；檢查結果區分已知、待驗與未完成。只處理學生自己的練習副本，不改現有展示網站，不要求付費訂閱。Cursor AI 無法使用？改用 ChatGPT 備援
把上方指定的檔案內容、清單與補充資料，連同同一份 Prompt 貼入 ChatGPT 對話。只貼電腦上的路徑，無法讓它讀取你的檔案。
收到程式碼時，先核對檔名與修改位置，再手動存回自己的練習副本；若收到檢查表或補檔步驟，就逐項操作。不要把 Prompt 或程式碼框的反引號貼進 HTML／CSS。
兩邊都受限時，可先看既有參考成果、檢查差異與手動修改；未做過的 AI 生成或公開發布仍記待完成。不要貼入帳密、金鑰或真實個資。
複製只取得 Prompt 文字，檔案需自行在 Cursor 附上；本頁不會呼叫 AI 或自動完成關卡。
留下自己的檢查紀錄
記下實際做過的操作、差異與結果。還沒做的項目寫「待完成」。
勾選與筆記只保存在這個瀏覽器。
重設只清除勾選，網站檔案與檢查筆記都保留。