使用 JavaScript 自動隱藏無目錄的 toc-block 區塊

前言

在網頁中，我們常會使用目錄區塊（toc-block）來幫助使用者快速瀏覽內容，但有時候目錄內容（gs-toc）可能因為資料不完整或條件不符而不存在，這時候空白的目錄區塊反而會影響頁面美觀與使用體驗。本文示範如何用簡單的 JavaScript 程式碼，在頁面載入完成後自動檢查並隱藏沒有目錄內容的 toc-block，適合前端工程師或自學者優化動態內容顯示。

為什麼要隱藏空的 toc-block

空的目錄區塊會佔據頁面空間，造成視覺上的空洞，甚至誤導使用者以為頁面資料不完整。透過程式自動判斷並隱藏，可以提升頁面整潔度與使用者體驗，尤其在內容經常變動或由後端動態產生時更為重要。

主要程式碼說明

以下是核心程式碼片段：

document.addEventListener("DOMContentLoaded", function() {
  const tocBlocks = document.querySelectorAll(".toc-block");

  tocBlocks.forEach(block => {
    const hasToc = block.querySelector(".gs-toc");
    if (!hasToc) {
      block.style.display = "none";
    }
  });
});

• 使用 DOMContentLoaded 事件確保 DOM 元素已經載入完畢，避免查詢不到元素。
• 利用 document.querySelectorAll 選取所有 .toc-block 元素，方便批次處理。
• 針對每個 toc-block，使用 querySelector 檢查是否含有 .gs-toc 子元素。
• 若找不到 .gs-toc，代表此目錄區塊沒有內容，將其 display 設為 none，達到隱藏效果。

實務應用與優化方向

• 此方法適用於靜態或動態產生的目錄區塊，確保頁面不會顯示空白區塊。
• 若目錄內容是透過 AJAX 載入，需將檢查邏輯放在資料載入完成後執行。
• 可搭配 CSS 動畫效果，讓隱藏過程更為平滑。
• 若頁面中 toc-block 數量龐大，考慮使用更有效率的 DOM 操作或節流機制。

常見問題與注意事項

• 確認 .gs-toc 是目錄內容的正確 class 名稱，避免誤判。
• 若頁面中有多層目錄結構，需調整選擇器以符合需求。
• 使用 display: none 會完全移除元素佔用空間，若想保留佔位可改用其他 CSS 屬性。

完整程式碼

document.addEventListener("DOMContentLoaded", function() {
  // 取得所有 toc-block
  const tocBlocks = document.querySelectorAll(".toc-block");

  tocBlocks.forEach(block => {
    // 檢查這個 toc-block 底下是否有 gs-toc
    const hasToc = block.querySelector(".gs-toc");

    // 如果沒有找到，則隱藏整個區塊
    if (!hasToc) {
      block.style.display = "none";
    }
  });
});