JavaScript 實作樹狀選單：相容 IE/Firefox 的極簡實現

核心思路：HTML 結構 + CSS 控制顯隱 + JS 切換狀態

利用 <ul>/<li> 巢狀結構表現階層，CSS display: none/block 控制展開/收合，JS 監聽點擊切換狀態與圖示。

HTML 結構範例

<ul>
  <li>
    <a id="products" href="#">[+]Product</a>
    <ul id="productsmenu" style="display: none">
      <li>Product</li>
      <li>Other Form</li>
      <li>Price</li>
    </ul>
  </li>
</ul>

href="#" 為偽連結，防止頁面跳轉。

JavaScript 實作（含瀏覽器相容處理）

<script type="text/javascript">
// 簡化 getElementById
function $(id) { return document.getElementById(id); }

function toggle(e) {
  // 相容 IE/Firefox 事件對象
  if (!e) e = window.event;
  // 取得觸發元素 ID：Firefox 用 e.target，IE 用 e.srcElement
  var whichlink = (e.target) ? e.target.id : e.srcElement.id;

  var obj = $(whichlink + "menu");          // 對應的子選單
  var visible = (obj.style.display == "block");
  var key = $(whichlink);                   // 觸發連結本身
  var keyname = key.firstChild.nodeValue.substring(3); // 取得純文字（去掉 [+]/[-]）

  if (visible) {
    obj.style.display = "none";
    key.firstChild.nodeValue = "[+]" + keyname;
  } else {
    obj.style.display = "block";
    key.firstChild.nodeValue = "[-]" + keyname;
  }

  // 防止偽連結點擊導致捲軸跳頂
  return false;
}

// 綁定事件
$("products").onclick = toggle;
</script>

關鍵相容性細節

• 事件對象：標準 DOM 用 e.target，IE 用 e.srcElement
• 事件綁定：範例用 onclick 直接綁定，現代專案建議用 addEventListener/attachEvent 統一封裝
• 偽連結副作用：return false 抑制預設行為（捲軸置頂）

擴展建議

• 多層巢狀遞迴綁定
• 鍵盤無障礙支援（Tab/Enter/Space）
• 狀態持久化（Cookie/LocalStorage 記住展開狀態）
• 動畫過渡（CSS transition / JS 動畫庫）

本文為面試題心得整理，提供最基礎可運行版本，生產環境建議採用成熟 UI 庫（如 zTree, jQuery UI Tree, Ant Design Tree）。