使用 <details> 與 <summary> 打造互動常見問題區教學

認識 <details> 與 <summary> 標籤

HTML5 新增的 <details> 與 <summary> 元素專門用來實現可展開/收合的內容區塊。<details> 作為容器標籤,包含了可以隱藏或顯示的內容;而 <summary> 則定義了容器的摘要或標題——也就是使用者始終可見的那一部分,通常是一個問題或標題文字。兩者結合,瀏覽器會自動產生互動效果:點擊 <summary> 區域即可切換顯示隱藏在 <details> 裡的內容。

<summary> 必須是 <details> 中的第一個子元素,作為內容的標題。當使用者以滑鼠點擊這個標題(或鍵盤將焦點移至標題並按下 Enter/空白鍵),瀏覽器會自動替 <details> 元素切換 open 屬性:

當 <details open> 存在時,表示內容展開,<details> 中除 <summary> 之外的所有子元素都會顯示出來。

當沒有 open 屬性時,表示內容維持收合狀態,只有 <summary> 所含的摘要文字可見。

換言之,我們不需要手動編寫腳本來切換內容,只要正確使用這對標籤,瀏覽器就內建了這種Disclosure Widget(展開/收合小工具)的互動行為。而且 <details> 元素本身是語意化的:對於搜尋引擎和輔助技術(如螢幕閱讀軟體)而言,它清楚地表達「這裡有可展開的詳細資訊」。基於這種語意結構,<summary> 通常會附帶一個小三角形箭頭指示(▶ 或 ▾),提示使用者這個區塊可點擊展開。這個箭頭是各瀏覽器的預設樣式,會隨著內容展開方向自動旋轉,讓使用者直觀瞭解目前是展開還是收合狀態。

值得一提的是,<details> 與 <summary> 在現代瀏覽器中的支援度相當完善。自 2020 年起,Chrome、Firefox、Safari、Edge 等主流瀏覽器都已全面支援這項功能(唯獨早期的 Internet Explorer 等舊版瀏覽器不支援,需要透過額外的 polyfill 腳本來模擬)。因此,在大多數情況下你可以放心使用這對標籤,讓 HTML 和瀏覽器幫你處理繁瑣的互動細節。

常見問題區實作範例

了解了基本原理後,讓我們動手實作一個簡單的 FAQ 區塊範例。下面的範例包含多個可展開的問題項目,每個項目用一組 <details> 包裹問題和答案。為了方便版面配置,我們也會加入一些 CSS 樣式來美化外觀。您可以直接複製這些 HTML 原始碼 和 CSS 樣式,再依需求調整內容與設計風格。示例如下:

HTML 原始碼:

使用數個 <details> 元素列出問題清單,每個 <summary> 放置問題文字,後面的元素作為答案內容。你可以將它們包含在一個 <section> 或 <div> 裡(例如加上 class="faq-section")以方便整體布局與樣式控制。範例中我們直接列出 <details> 項目:

<section class="faq-section">
  <h2>常見問題</h2>

  <details>
    <summary>網站是否支援多語言?</summary>
    <p>是的,本網站目前提供繁體中文與英文兩種語言介面。</p>
  </details>

  <details>
    <summary>沒有註冊帳號可以瀏覽內容嗎?</summary>
    <p>可以!本站大部分內容開放瀏覽,只有在提交留言或購買服務時才需要註冊並登入帳號。</p>
  </details>

  <details>
    <summary>如何聯絡網站客服?</summary>
    <p>您可以點擊頁腳的「聯絡我們」取得客服信箱,或透過網站上的聯繫表單發送訊息給我們。</p>
  </details>
</section>

上述 HTML 結構非常直觀:我們建立了一個常見問題區段,裡面有三個問題項目。每個 <details> 定義一個可折疊的問答組合:<summary> 中放入使用者會看到的問題,而緊隨其後的 <p> 則是答案內容(當然你也可以用 <div>、清單、圖片等任何元素來豐富答案部分)。剛進入頁面時,<details> 預設處於收合狀態,因此使用者只會看到問題列表。點擊任意問題,瀏覽器就會自動為該 <details> 加上 open 屬性,從而顯示出答案。

CSS 樣式:

接下來,我們為 FAQ 區塊添加一些樣式,讓它更醒目易讀,也更符合設計上的需求。以下是範例的 CSS,可調整配色與間距以符合你的網站風格:

/* 整個 FAQ 區塊的寬度與字型設定 */
.faq-section {
  max-width: 600px;
  font-family: Arial, Helvetica, sans-serif;
}

/* 每個問題項目的外觀 */
.faq-section details {
  border: 1px solid #CCC;
  border-radius: 4px;
  margin: 1em 0;               /* 每個問題項目之間留點間距 */
  padding: 0.5em;
}

/* 問題標題(summary)的樣式 */
.faq-section summary {
  font-weight: 600;
  cursor: pointer;
  /* 移除預設的 list-style,部分瀏覽器需要這樣處理 */
  list-style: none;
}

/* 當內容展開時,給問題標題加上一條底線區隔 */
.faq-section details[open] summary {
  border-bottom: 1px solid #CCC;
}

/* 答案內容部分的樣式 */
.faq-section p {
  margin: 0.5em 0 0 0;
  line-height: 1.6;
}

/* 調整預設箭頭指示符的樣式:這裡簡單改變其顏色大小 */
.faq-section summary::marker {
  color: #555;
  font-size: 1.2em;
}

上述樣式做了以下幾件事:首先,每個 <details> 加上淡灰色的邊框和圓角,並在項目間留出空白,讓整體呈現類似卡片的分隔效果;<summary> 部分以較粗體字顯示並變成游標可點擊的樣式(利用 cursor: pointer 提示這是一個可點擊元素)。我們也將 summary { list-style: none; } 設定,來移除部分瀏覽器預設在 <summary> 前面的項目符號樣式,以免干擾自訂外觀。當 <details> 展開時,我們利用 details[open] summary 選擇器為標題增加下邊框,視覺上區隔開問題和答案。最後,我們針對 summary::marker 微調了指示箭頭的樣式,把預設的小箭頭顏色變深、尺寸放大一點,讓它更明顯。

套用以上 HTML 和 CSS 後,一個簡潔的互動式 FAQ 區塊就完成了!載入頁面時只顯示問題列表,使用者點一下問題就能看到答案,再點一次或點擊其他地方則收合。沒有一行 JavaScript,完全以原生 HTML 元素達成,既方便又語意良好。

進階互動與設計小技巧

基本的 FAQ 已經可以運作,不過我們還可以進一步優化體驗與外觀。以下提供一些進階技巧,讓你的常見問題區更流暢、無障礙且符合需求:

滑順的展開/收合動畫: 標準的 <details> 元素在開合內容時沒有內建動畫,內容會瞬間展開或收起。如果希望增加視覺上的順暢效果,可以透過 CSS 或少量 JavaScript 加入動畫。例如,使用 CSS transition 配合高度變化來模擬動畫:為答案區塊設定一個過渡效果,當 <details> 的 open 狀態變化時改變最大高度 (max-height) 或透明度來呈現漸變展開效果。需要注意的是,如果採用 CSS 動畫,別忘了照顧偏好減少動畫的使用者——可以使用媒體查詢 @media (prefers-reduced-motion: reduce) 在偵測到使用者偏好簡化動畫時自動停用過渡效果,確保無論是否有動畫,使用者體驗都是舒適的。

自訂樣式與指示圖示: 根據網站風格,你或許想調整 <summary> 的外觀,甚至替換掉預設的箭頭符號。例如,有些設計喜歡用「＋／－」符號表示展開與收合。這可以透過 CSS 實現:我們已在上面的樣式中用 summary::marker 調整了預設箭頭的樣式,你也可以更進一步,乾脆隱藏它並用自行加入的圖示替代。隱藏方式是在 CSS 中加入:

summary::-webkit-details-marker { display: none; }
summary::marker { content: ""; }

這兩行可移除 Chrome/Safari 等使用 -webkit 前綴的瀏覽器,以及Firefox等瀏覽器中 <summary> 自帶的圖示。接著可以利用 summary::before 或 summary::after 來插入自訂符號作為指示器,例如在 summary::before 裡設定 content: "＋";,並在 details[open] summary::before 切換為 "－" 符號,以此實現點擊展開後符號跟著改變的效果。但請注意無障礙性:某些螢幕閱讀器會將那個預設箭頭當作控制項的一部分來讀出開合狀態。如果我們移除了它,可能導致螢幕閱讀器無法直接告知使用者區塊是展開還是收合。為了兼顧視覺與無障礙,你可以在 <summary> 裡以隱藏文字或 aria-label 說明狀態,或確保自訂的圖示對應的文字(例如 "+" 讀作「展開」/ "−" 讀作「收合」)。簡而言之,自訂樣式能提升美觀,但務必測試各種情境下的可用性,避免因裝飾而犧牲了對鍵盤和輔助技術使用者的友好度。此外,調整樣式時也應保留或自訂焦點樣式(例如按 Tab 鍵聚焦 <summary> 時的外框),確保鍵盤導航時焦點位置清晰可見。

手風琴模式(僅單一展開): 一般 FAQ 允許多個問題同時展開,但有時我們希望同一時間只讓一個答案處於展開狀態,點開新的會自動收起先前的,形成所謂「手風琴」效果。過去實現這需要寫額外的 script 去監控點擊事件,但最新標準已經提供簡便解法:給相關的 <details> 元素指定相同的 name 屬性值,即可把它們分組為互斥的一組。例如:<details name="faq-group"> ... </details> 連續幾個都用 name="faq-group",那麼在支援這項功能的瀏覽器中(如新版 Chrome、Firefox 等),使用者展開其中一個 <details> 時,同組的其他 <details> 會自動收合,確保同組裡只會有一項是打開的。如果有多個分組,只需給不同組使用不同的 name 值即可。需要注意的是,這項功能是近期才加入標準的,老版本瀏覽器可能尚未支援。如果要兼容所有瀏覽器,你可以在使用 name 屬性的同時,加入一些 JavaScript 作為後備:監聽 <details> 的 toggle 事件,一旦有一個打開,就程式化地關閉其他打開的 <details>。不過隨著瀏覽器更新普及,name 屬性將成為實現單一展開的最簡單純淨方案。

以上這些技巧可視需求選擇性使用:有了動畫,互動體驗會更順暢;自訂樣式讓設計更符合品牌風格;無障礙考量則確保功能對所有用戶都友好;手風琴模式適合內容很多時避免頁面滾動過長。適當地運用這些進階功能,能讓你的常見問題區更上一層樓。

常見實作疑問解答

最後,我們來解答幾個在使用 <details>/<summary> 製作 FAQ 時,初學者經常提出的疑問:

問: 使用 <details> 實作的內容對 SEO 有影響嗎?搜尋引擎會不會忽略收合起來的答案內容?
答: 一般來說,將 FAQ 答案放在 <details> 中對於 SEO 沒有負面影響。現代搜尋引擎(如 Google)仍然會索引頁面的所有 HTML 文本,就算內容初始是隱藏的也能讀取。因此,只要你的問答內容對使用者有價值,搜索引擎會正常評估這部分文字。不過,切忌為了 SEO 而濫用隱藏內容。如果你將大量關鍵字塞進 <details> 並試圖藉此提高排名,搜索引擎可能視之為不誠實手法。因此,正確的做法是把 <details> 當作提升使用者體驗的工具,而非藏匿關鍵字的手段。

問: 我在部分瀏覽器中發現 <summary> 前面的箭頭樣式位置怪怪的,或是 CSS 樣式好像沒套用,怎麼回事?
答: 各瀏覽器對 <details> 和 <summary> 有一些預設樣式和呈現差異。例如某些瀏覽器會將 <summary> 預設當作清單項目(display: list-item),因此會有縮進或項目符號。如果你發現樣式異常,首先可以在 CSS 中明確設置 summary { display: block; } 或 list-style: none; 來重置預設行為。此外,確保你的 CSS 選擇器正確:例如要選到 <summary> 裡的元素,可能需要寫 details summary span { ... } 這類明確的層級。有時瀏覽器的預設樣式優先權較高,你可以嘗試加上一些特定性或使用 !important 來覆蓋(謹慎使用)。簡而言之,遇到樣式怪異時,檢查開發者工具看瀏覽器預設樣式干擾,逐一重置或調整,就能解決。

問: 為什麼我的 <details> 元素點了沒反應、無法展開呢?
答: 如果 <details> / <summary> 沒有作用,可能有幾種常見原因:第一,請確認你的 HTML 語法正確——<summary> 一定要放在 <details> 元素內的第一個位置,兩者標籤都需要正確閉合。如果 <summary> 不在正確位置,瀏覽器可能自動更正導致無法運作。第二,檢查是否有 JavaScript 或 CSS 不小心干擾了它們。例如,不要給 <summary> 加上 pointer-events: none 或將其 display 設為非 block/inline 元素。第三,考慮瀏覽器支援性:確保你在現代瀏覽器環境下測試。如果需要支援 IE 瀏覽器,那它本身不支援 <details>,你需要引入額外的 polyfill 腳本才能讓這對標籤在舊環境下運行。總之,先從語法結構著手,再看樣式與環境,相信很快就能找出問題所在。

問: 可以在 <summary> 或折疊內容裡放置互動元素嗎?比如在問題標題裡放一個圖示按鈕,或在答案內容裡加入表單等?
答: 是可以的,但要小心測試。<summary> 本身就是可點擊的控制項,如果你在 <summary> 裡再放其他可點擊元素(例如按鈕或連結),用戶點擊它們時可能同時觸發展開/收合行為或出現焦點混亂。所以一般建議 <summary> 裡的內容儘量簡單,通常只放純文字或圖示(圖示用 CSS background 或 ::before 插入較佳,而非額外的交互元件)。至於 <details> 裡的隱藏內容部分,你可以放任何你需要的東西,包括段落、清單、圖片甚至表單元素。這些在展開後就跟普通的頁面內容無異。但要注意無障礙:如果在隱藏內容中有表單或可互動元件,使用者鍵盤導航時可能無法直接跳入隱藏區域(因為未展開時焦點無法進入)。你可以在適當位置使用 JavaScript,在展開 <details> 時將焦點移到內部第一個互動元素上,或提供清晰的Tab順序指引。總之,內容上沒有嚴格限制,但交互元素的嵌入要特別留意用戶操作體驗。

問: 我想讓所有 FAQ 問題在列印網頁時都自動展開,該怎麼做?
答: 這是一個很棒的需求!使用者在列印頁面(或匯出為 PDF)時,通常會希望所有答案都可見。由於 <details> 預設的行為是收合隱藏內容,我們可以透過 CSS 的 列印媒體查詢 來改變這點。例如,你可以加入以下 CSS:

@media print {
  details[open], details:not([open]) {
    /* 強制所有 details 元素在列印時呈現展開狀態 */
    open: open;
  }
  details summary {
    /* 如果不想在印刷品上顯示問題標題前的箭頭,甚至隱藏 summary 本身 */
    list-style: none;
  }
}

上述 @media print 內的樣式嘗試強制無論有無 open 屬性,都將 <details> 視為展開(部分瀏覽器可能需要以 JavaScript 在列印事件時動態加入 open 屬性才能確保內容展開)。另外,你也可以選擇在列印時隱藏 <summary> 標題,只打印答案內容。實務上,由於不同瀏覽器對列印的處理略有不同,你可能需要微調上述方式或借助一點點腳本來確保體驗。重點是透過媒體查詢設定,可以控制列印輸出的樣式,把隱藏的內容秀出來,滿足列印閱讀的需求。