JavaScript中Switch语句仅首个Case生效问题求助

问题根源 #

1. Switch语句写法错误：你代码里的case不能直接写带逻辑判断的表达式，而且误用了位运算符&，这会导致数值和布尔值做位运算，最终只有case 1能匹配成功，其他选项的逻辑根本触发不了。
2. 状态管理冗余：用one、two这类独立变量管理每个选项的展开状态，不仅代码繁琐，还容易出现状态混乱的问题。

优化后的代码方案 #

方案一：保留内联点击事件（简单直接）

<div class="education_selector"> 
    <a class="education_name" onclick="openEdu(1)">选项1</a>
    <a class="education_name" onclick="openEdu(2)">选项2</a>
    <a class="education_name" onclick="openEdu(3)">选项3</a>
    <a class="education_name" onclick="openEdu(4)">选项4</a>
    <a class="education_name" onclick="openEdu(5)">选项5</a>
</div>

<!-- 类名改为更语义化的命名 -->
<div class="edu_menu closed">这里展示选中选项的文本内容</div>

const eduMenu = document.querySelector('.edu_menu');
// 用单个变量记录当前展开的选项ID，null表示全部收起
let activeEduId = null;

function openEdu(id) {
    // 点击当前展开的选项则收起，否则展开该选项
    if (activeEduId === id) {
        eduMenu.classList.add('closed');
        eduMenu.classList.remove('open');
        activeEduId = null;
    } else {
        eduMenu.classList.remove('closed');
        eduMenu.classList.add('open');
        activeEduId = id;
        // 可在此处根据ID切换菜单内容
        eduMenu.textContent = `这是选项${id}的详细内容`;
    }
}

方案二：事件委托（更符合现代JS规范）

如果后续可能新增选项，推荐用事件委托，不用给每个选项单独绑定点击事件：

<div class="education_selector"> 
    <a class="education_name" data-id="1">选项1</a>
    <a class="education_name" data-id="2">选项2</a>
    <a class="education_name" data-id="3">选项3</a>
    <a class="education_name" data-id="4">选项4</a>
    <a class="education_name" data-id="5">选项5</a>
</div>

<div class="edu_menu closed">这里展示选中选项的文本内容</div>

const eduSelector = document.querySelector('.education_selector');
const eduMenu = document.querySelector('.edu_menu');
let activeEduId = null;

// 给父元素绑定点击事件，统一处理子元素的点击
eduSelector.addEventListener('click', (e) => {
    if (e.target.classList.contains('education_name')) {
        const id = parseInt(e.target.dataset.id);
        if (activeEduId === id) {
            eduMenu.classList.add('closed');
            eduMenu.classList.remove('open');
            activeEduId = null;
        } else {
            eduMenu.classList.remove('closed');
            eduMenu.classList.add('open');
            activeEduId = id;
            eduMenu.textContent = `这是选项${id}的详细内容`;
        }
    }
});

优化说明 #

• 用单个变量activeEduId替代多个独立状态变量，状态管理更简洁，避免逻辑混乱。
• 移除错误的switch逻辑，改用清晰的条件判断，降低代码复杂度。
• 类名改为closed和open，语义化更强，便于维护CSS样式。

内容的提问来源于stack exchange，提问作者Findley Drummond