JavaScript 導航選單切換程式碼逐行解析與邏輯圖解

以下這段 JS 程式碼實現經典的單一展開導航選單：點擊某項展開內容，同時關閉其他已展開項目。適合側邊欄選單、常見問答（FAQ）摺疊面板等場景。

原始程式碼

function leo(n) {
    var navUi = document.getElementById("m" + n);
    if (navUi.style.display != "block") {
        for (var i = 0; i <= 5; i++) {
            document.getElementById("m" + i).style.display = "none";
        }
        navUi.style.display = "block";
    } else {
        navUi.style.display = "none";
    }
}

逐行邏輯解析

參數 n 的角色

n 為呼叫時傳入的索引值（0~5），對應 HTML 中各面板的 ID 尾碼。例如：onclick="leo(2)" 會控制 id="m2" 的元素。

改良建議

• 將硬編碼的 5 改為動態取得面板總數：document.querySelectorAll('[id^=m]').length - 1。
• 使用 CSS 類別控制顯示/隱藏（classList.toggle('active')），分離樣式與行為。
• 加入 aria-expanded 無障礙屬性，提升可及性。