JavaScript switch 语句进阶：理解匹配机制与优化复杂条件逻辑

switch (expression) {
    case value1:
        // 当 expression === value1 时执行的代码
        break;
    case value2:
        // 当 expression === value2 时执行的代码
        break;
    // ...更多 case
    default:
        // 当 expression 不匹配任何 case 值时执行的代码
        break;
}

// 原始错误代码片段示例
switch (open_edu_num) {
    case 1 & one == true:
        // ...
        break;
    case 2 & two == true:
        // ...
        break;
    // ...
}

var open_edu_menu = document.querySelector(".closed_edu_menu");
var one = true;
var two = true;
var three = true;
var four = true;
var five = true;

function open_edu(open_edu_num) {
    switch (open_edu_num) {
        case 1:
            if (one) { // 检查 one 的状态
                open_edu_menu.classList.add("open_edu_menu");
                open_edu_menu.classList.remove("closed_edu_menu");
                one = false;
                two = true;
                three = true;
                four = true;
                five = true;
            } else {
                open_edu_menu.classList.remove("open_edu_menu");
                open_edu_menu.classList.add("closed_edu_menu");
                one = true;
                two = false; // 关闭时，其他也应为 false，或根据需求设置
                three = false;
                four = false;
                five = false;
            }
            break;

        case 2:
            if (two) { // 检查 two 的状态
                open_edu_menu.classList.add("open_edu_menu");
                open_edu_menu.classList.remove("closed_edu_menu");
                one = true;
                two = false;
                three = true;
                four = true;
                five = true;
            } else {
                open_edu_menu.classList.remove("open_edu_menu");
                open_edu_menu.classList.add("closed_edu_menu");
                one = false;
                two = true;
                three = false;
                four = false;
                five = false;
            }
            break;

        // ... 其他 case 3, 4, 5 类似处理
    }
}

// HTML 结构保持不变
/*
<div class="education_selector">
    <a class="education_name" onclick="open_edu(1)">temp</a>
    <a class="education_name" onclick="open_edu(2)">temp</a>
    <a class="education_name" onclick="open_edu(3)">temp</a>
    <a class="education_name" onclick="open_edu(4)">temp</a>
    <a class="education_name" onclick="open_edu(5)">temp</a>
</div>
<div class="closed_edu_menu"></div>
*/

var open_edu_menu = document.querySelector(".closed_edu_menu");
// 使用一个变量来跟踪当前打开的菜单项的ID
// 0 或 null 表示当前没有菜单是打开的
var activeEduId = 0;

function open_edu(clickedNum) {
    // 检查点击的菜单项是否就是当前已经打开的菜单项
    if (activeEduId === clickedNum) {
        // 如果是，说明用户想关闭它
        open_edu_menu.classList.remove("open_edu_menu");
        open_edu_menu.classList.add("closed_edu_menu");
        activeEduId = 0; // 重置状态，表示没有菜单打开
    } else {
        // 如果点击的是不同的菜单项，或者当前没有菜单打开
        // 1. 先确保菜单处于打开状态
        open_edu_menu.classList.add("open_edu_menu");
        open_edu_menu.classList.remove("closed_edu_menu");
        // 2. 更新状态，记录当前打开的是哪个菜单
        activeEduId = clickedNum;

        // 如果将来需要根据不同的菜单项加载不同的内容，可以在这里使用 switch
        // 例如：
        // switch (clickedNum) {
        //     case 1:
        //         open_edu_menu.innerHTML = "这是菜单1的内容";
        //         break;
        //     case 2:
        //         open_edu_menu.innerHTML = "这是菜单2的内容";
        //         break;
        //     case 3:
        //         open_edu_menu.innerHTML = "这是菜单3的内容";
        //         break;
        //     case 4:
        //         open_edu_menu.innerHTML = "这是菜单4的内容";
        //         break;
        //     case 5:
        //         open_edu_menu.innerHTML = "这是菜单5的内容";
        //         break;
        // }
    }
}