商用網站架設實務

LESSON-17 · solution

JavaScript 基礎：事件、行動版選單與 FAQ

這一頁不是直接複製答案；先逐檔看差異、修改原因與驗收證據，再把需要的改動帶回自己的資料夾。 這頁用 可觀察證據 和 anchor 指出下一個動作。

Starter3 個小成果
Checkpoint一個核心缺口
Solution4 個差異

開始前確認

這一頁的結果：選單與 FAQ 的 aria-controls、aria-expanded、hidden 完整同步；index.html 與 services.html 都能開啟且 Console 沒有 TypeError 或 ReferenceError；沒有 TODO、CHECKPOINT、placeholder，且 main.js 只載入於需要互動的入口

工作方式：先把這一階段複製到自己的工作資料夾，開啟 files/index.html，記下修改前的畫面、DOM、Console 或 Network狀態。

會用到的檔案：index.html、style.css、main.js、services.html

本堂焦點：用事件監聽完成行動版選單與 FAQ 開合

照這個順序做

一次只做一張卡。完成後先重新整理入口，再留下證據，才進入下一張。

差異 1

先把一個狀態的三個可觀察結果放在同一個責任裡，避免只改畫面或只改 ARIA。

目的

先把一個狀態的三個可觀察結果放在同一個責任裡，避免只改畫面或只改 ARIA。

修改檔案

main.js

程式碼位置

setMenuOpen

現在要做：先對照差異，再檢查 在 main.js 的「setMenuOpen」對照這項變更：function setMenuOpen(isOpen) { menuButton.setAttribute("aria-expanded", String(isOpen)); menuButton.textContent = isOpen ? "關閉選單" : "開啟選單"; siteNav.hidden = !isOpen; }

貼上位置：main.js 的 setMenuOpen 區塊

function setMenuOpen(isOpen) {
  menuButton.setAttribute("aria-expanded", String(isOpen));
  menuButton.textContent = isOpen ? "關閉選單" : "開啟選單";
  siteNav.hidden = !isOpen;
}

預期結果：讀者能在同一個 function 看到開啟／關閉狀態如何同時反映到按鈕與 nav。

驗收證據：檔案中的 setMenuOpen、Elements 的 aria-expanded、按鈕文字與 nav.hidden。

卡住時先看這裡

常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。

第一個檢查：只對照目前差異指定的檔案與 anchor。

差異 2

分清楚 callback 是事件發生後才執行的函式，不要在 addEventListener 時先把函式呼叫掉。

目的

分清楚 callback 是事件發生後才執行的函式，不要在 addEventListener 時先把函式呼叫掉。

修改檔案

main.js

程式碼位置

menuButton click listener

現在要做：先對照差異，再檢查 在 main.js 的「menuButton click listener」對照這項變更：menuButton.addEventListener("click", () => { const isOpen = menuButton.getAttribute("aria-expanded") === "true"; setMenuOpen(!isOpen); });

貼上位置：main.js 的 menuButton click listener 區塊

menuButton.addEventListener("click", () => {
  const isOpen = menuButton.getAttribute("aria-expanded") === "true";
  setMenuOpen(!isOpen);
});

預期結果：每點一次選單按鈕，nav 可見性、aria-expanded、按鈕文字與狀態訊息一起改變。

驗收證據：滑鼠點擊、鍵盤 Enter/Space、Elements 的 hidden 與 aria-expanded、Console 無錯誤。

卡住時先看這裡

常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。

第一個檢查：只對照目前差異指定的檔案與 anchor。

差異 3

把同一種事件流程移植到多個 FAQ：先找對目標，再同步按鈕和答案的狀態。

目的

把同一種事件流程移植到多個 FAQ：先找對目標，再同步按鈕和答案的狀態。

修改檔案

main.js

程式碼位置

FAQ button listener

現在要做：先對照差異，再檢查 在 main.js 的「FAQ button listener」對照這項變更：faqButtons.forEach((button) => { button.addEventListener("click", () => { const answer = document.querySelector("#" + button.getAttribute("aria-controls")); const isOpen = button.getAttribute("aria-expanded") === "true"; button.setAttribute("aria-expanded", String(!isOpen)); answer.hidden = isOpen; }); });

貼上位置：main.js 的 FAQ button listener 區塊

faqButtons.forEach((button) => {
  button.addEventListener("click", () => {
    const answer = document.querySelector("#" + button.getAttribute("aria-controls"));
    const isOpen = button.getAttribute("aria-expanded") === "true";
    button.setAttribute("aria-expanded", String(!isOpen));
    answer.hidden = isOpen;
  });
});

預期結果：每個 FAQ 可獨立開合，多題可以同時展開；答案文字會在 hidden 前後真正出現或消失。

驗收證據：每個 button 的 aria-controls、對應 answer id、aria-expanded、hidden、畫面文字與鍵盤操作。

卡住時先看這裡

常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。

第一個檢查：只對照目前差異指定的檔案與 anchor。

差異 4

用可觀察的畫面與 DOM 證明『狀態值改變』不等於『目標已顯示』。

目的

用可觀察的畫面與 DOM 證明『狀態值改變』不等於『目標已顯示』。

修改檔案

main.js

程式碼位置

setMenuOpen

現在要做：先對照差異，再檢查 在 main.js 的「setMenuOpen」對照這項變更：siteNav.hidden = !isOpen;

貼上位置：main.js 的 setMenuOpen 區塊

siteNav.hidden = !isOpen;

預期結果：修正前按鈕的 aria-expanded 會變成 true 但 nav 仍 hidden；修正後點擊能看到導覽，再點一次能收合。

驗收證據：修正前後比較 nav.hidden、aria-expanded、按鈕文字、畫面可見性與 Console。

卡住時先看這裡

常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。

第一個檢查：只對照目前差異指定的檔案與 anchor。

階段檔案

完整檔案收在可展開的卡片中；先完成上方微步驟，再用這裡查閱與複製。檔案位置要和目前的相對路徑一致。

開啟 solution 的可執行入口

index.html入口 HTML：提供完整的 menuButton、site-nav、FAQ button、answer 與 aria 關係；Starter 不要求學生重建 HTML。

這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。

​
<!doctype html>
<html lang="zh-Hant">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>LESSON-17｜事件、行動版選單與 FAQ｜solution</title>
  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' rx='4' fill='%23176b87'/%3E%3C/svg%3E" type="image/svg+xml">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="site-header">
    <a href="index.html">安心維護</a>
    <button id="menuButton" type="button" aria-controls="site-nav" aria-expanded="false">開啟選單</button>
    <nav id="site-nav" hidden aria-label="主要導覽">
      <a href="index.html">首頁</a>
      <a href="services.html">服務方案</a>
    </nav>
  </header>
  <main class="page-shell">
    <p class="eyebrow">LESSON-17 · JavaScript 事件</p>
    <h1>行動版選單與 FAQ</h1>
    <p class="page-description">完整結果：選單與 FAQ 的事件、DOM 狀態、鍵盤操作與目的頁路徑都可驗收。</p>
    <p id="status" class="status" role="status" aria-live="polite">尚未操作</p>
    <section aria-labelledby="faq-title">
      <h2 id="faq-title">常見問題</h2>
      <ul class="faq-list">
        <li class="faq-item">
          <button type="button" data-faq-button aria-controls="faq-answer-1" aria-expanded="false">多久可以開始？</button>
          <p id="faq-answer-1" hidden>確認需求後即可安排下一步。</p>
        </li>
        <li class="faq-item">
          <button type="button" data-faq-button aria-controls="faq-answer-2" aria-expanded="false">可以先做小範圍嗎？</button>
          <p id="faq-answer-2" hidden>可以，先從一項服務開始。</p>
        </li>
      </ul>
    </section>
  </main>
  <script src="main.js" defer></script>
</body>
</html>
style.css呈現層：控制 hidden、focus、FAQ 與窄版可讀性；不把事件邏輯放進 CSS。

這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。

​
:root { font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans TC", sans-serif; color: #17324d; background: #f5f8fb; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; line-height: 1.7; }
.site-header, .page-shell { width: min(100% - 2rem, 760px); margin: 0 auto; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; flex-wrap: wrap; }
.site-header nav { display: flex; flex-wrap: wrap; gap: .75rem; }
.page-shell { margin-top: 1rem; margin-bottom: 2rem; padding: 2rem; border: 1px solid #cbd8e4; border-radius: 1rem; background: #fff; }
.eyebrow { color: #176b87; font-weight: 800; letter-spacing: .06em; }
.page-description { color: #52657d; }
.faq-list { display: grid; gap: .75rem; padding: 0; list-style: none; }
.faq-item { padding: 1rem; border: 1px solid #cbd8e4; border-radius: .75rem; background: #fbfdff; }
.faq-item p { margin-bottom: 0; }
button, a { font: inherit; }
button { padding: .6rem .85rem; border: 0; border-radius: .5rem; background: #176b87; color: #fff; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 3px solid #f1ab2c; outline-offset: 3px; }
nav[hidden], [hidden] { display: none; }
.status { min-height: 1.7rem; color: #17643d; font-weight: 700; }
@media (max-width: 560px) { .page-shell { padding: 1rem; } .site-header { align-items: flex-start; } }
main.js行為層：用 addEventListener 處理選單與 FAQ，讓 aria 狀態和 hidden 狀態同步。

這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。

​
const menuButton = document.querySelector("#menuButton");
const siteNav = document.querySelector("#site-nav");
const status = document.querySelector("#status");
const faqButtons = document.querySelectorAll("[data-faq-button]");

function setMenuOpen(isOpen) {
  menuButton.setAttribute("aria-expanded", String(isOpen));
  menuButton.textContent = isOpen ? "關閉選單" : "開啟選單";
  siteNav.hidden = !isOpen;
  status.textContent = isOpen ? "選單已開啟" : "選單已關閉";
}

menuButton.addEventListener("click", () => {
  const isOpen = menuButton.getAttribute("aria-expanded") === "true";
  setMenuOpen(!isOpen);
});

faqButtons.forEach((button) => {
  button.addEventListener("click", () => {
    const answer = document.querySelector("#" + button.getAttribute("aria-controls"));
    const isOpen = button.getAttribute("aria-expanded") === "true";
    button.setAttribute("aria-expanded", String(!isOpen));
    answer.hidden = isOpen;
    status.textContent = isOpen ? "FAQ 答案已收合" : "FAQ 答案已展開";
  });
});
services.html目的頁：只提供導覽可到達的內容，不載入首頁互動 main.js。

這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。

​
<!doctype html>
<html lang="zh-Hant">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>服務方案｜安心維護</title>
  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' rx='4' fill='%23176b87'/%3E%3C/svg%3E" type="image/svg+xml">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="page-shell">
    <p class="eyebrow">LESSON-17 · 目的頁</p>
    <h1>服務方案</h1>
    <p>這一頁只作為導覽連結的目的地，不載入首頁的互動 main.js。</p>
    <p><a href="index.html">回到首頁</a></p>
  </main>
</body>
</html>

完成驗收

下一步

Solution 對照完成後，回到 README 整理證據，並準備下一堂課的先備知識。

回到 README，整理本堂證據並銜接下一堂