使用純 JavaScript 實作語言切換下拉選單的開關功能

前言

在多語系網站中，語言切換器常以下拉選單呈現。這段程式碼示範如何用純 JavaScript 實作語言切換下拉選單的開關與關閉行為，適合需要自訂互動邏輯且不依賴外部函式庫的前端工程師或自學者。

元素選取與初始檢查

首先透過 document.querySelector 取得包裹整個語言切換器的容器 .lang-wrapper，若找不到則直接結束，避免後續執行錯誤。接著從 wrapper 中取得觸發按鈕 .lang-btn 和下拉選單 nav[role="navigation"]，同樣檢查是否存在。

const wrapper = document.querySelector('.lang-wrapper');
if (!wrapper) return;

const btn = wrapper.querySelector('.lang-btn');
const nav = wrapper.querySelector('nav[role="navigation"]');
if (!btn || !nav) return;

這樣的防呆設計確保程式碼安全執行。

點擊按鈕切換下拉選單

為按鈕綁定點擊事件，點擊時阻止事件冒泡，避免觸發 document 的點擊事件導致下拉選單立即關閉。接著透過 classList.toggle 切換下拉選單的 is-open 樣式類別，達成開關效果。

btn.addEventListener('click', function (e) {
  e.stopPropagation();
  nav.classList.toggle('is-open');
});

點擊外部區域關閉下拉選單

監聽整個文件的點擊事件，判斷點擊目標是否在 wrapper 範圍內，若不在則移除 is-open，關閉下拉選單。這是常見的 UX 行為，避免下拉選單在使用者點擊其他區域時仍保持開啟。

document.addEventListener('click', function (e) {
  if (!wrapper.contains(e.target)) {
    nav.classList.remove('is-open');
  }
});

按下 ESC 鍵關閉下拉選單

為提升無障礙與使用便利性，監聽鍵盤事件，當使用者按下 ESC 鍵時，也會關閉下拉選單。

document.addEventListener('keydown', function (e) {
  if (e.key === 'Escape') {
    nav.classList.remove('is-open');
  }
});

實務應用與優化方向

此實作不依賴任何框架，適用於輕量網站。若要擴充，可加入鍵盤導覽支援（如方向鍵選擇）、ARIA 屬性強化無障礙，或改用事件代理提升效能。此外，CSS 動畫搭配 is-open 類別能帶來更好的使用體驗。

完整程式碼

document.addEventListener('DOMContentLoaded', function () {
  const wrapper = document.querySelector('.lang-wrapper');
  if (!wrapper) return;

  const btn = wrapper.querySelector('.lang-btn');
  const nav = wrapper.querySelector('nav[role="navigation"]');
  if (!btn || !nav) return;

  btn.addEventListener('click', function (e) {
    e.stopPropagation();
    nav.classList.toggle('is-open');
  });

  document.addEventListener('click', function (e) {
    if (!wrapper.contains(e.target)) {
      nav.classList.remove('is-open');
    }
  });

  document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape') {
      nav.classList.remove('is-open');
    }
  });
});