问题：点击menuFilter按钮时if-else所有分支均执行，不符合预期

问题根源 #

你的代码点击按钮时同时执行if/else分支，核心原因有两点：

1. 冗余嵌套循环：内层j循环遍历所有icons元素，导致每次点击重复执行多次逻辑——第一个元素触发if分支修改状态后，后续元素因状态变化触发else分支，最终两个分支都被执行。
2. 状态判断逻辑混乱：通过userIconText[i].style.display逐个判断元素状态，加上循环中反复修改全局DOM样式，导致状态互相冲突。

修复方案 #

方案1：用统一状态变量控制切换（原生JS行内样式） #

去掉嵌套循环，用变量记录菜单展开/收起状态，确保每次点击只执行一个分支：

// 缓存DOM元素
const userIconText = document.getElementsByClassName("iconText");
const userIconDiv = document.getElementById("userIcons");
const rCorners2 = document.getElementById("rcorners2");
const homeContainerDiv = document.getElementById("homePanel");
const icons = document.querySelectorAll('#userIcons li');
const menuFilterBtn = document.getElementById("menuFilter");

// 记录菜单状态：true=展开，false=收起
let isMenuExpanded = false;

menuFilterBtn.onclick = function(){
    // 切换状态
    isMenuExpanded = !isMenuExpanded;

    // 批量处理图标文本和列表项样式
    for (let i = 0; i < userIconText.length; i++) {
        if (isMenuExpanded) {
            userIconText[i].style.display = "block";
            icons[i].style.margin = "75px 20px 0 10px";
        } else {
            userIconText[i].style.display = "none";
            icons[i].removeAttribute("style");
        }
    }

    // 统一修改全局容器样式（只执行一次，避免循环内重复覆盖）
    if (isMenuExpanded) {
        userIconDiv.style.width = "10vw";
        homeContainerDiv.style.width = "85vw";
        homeContainerDiv.style.transform = "translateX(5%)";
        rCorners2.style.width = "53vw";
        rCorners2.style.left = "295px";
        console.log("菜单展开");
    } else {
        userIconDiv.style.width = "5vw";
        homeContainerDiv.style.width = "90vw";
        homeContainerDiv.style.transform = "";
        rCorners2.style.width = "";
        rCorners2.style.left = "";
        console.log("菜单收起");
    }
}

方案2：用CSS类切换状态（更易维护） #

将样式逻辑剥离到CSS，JS仅负责切换类，避免行内样式混乱：

第一步：添加CSS类

/* 菜单容器样式 */
.user-icons-expanded { width: 10vw; }
.user-icons-collapsed { width: 5vw; }

/* 主页面板样式 */
.home-panel-expanded { width: 85vw; transform: translateX(5%); }
.home-panel-collapsed { width: 90vw; }

/* 圆角容器样式 */
.rcorners2-expanded { width: 53vw; left: 295px; }

/* 图标文本样式 */
.icon-text-expanded { display: block; }
.icon-text-collapsed { display: none; }

/* 图标列表项样式 */
.icon-item-expanded { margin: 75px 20px 0 10px; }

第二步：修改JS代码

const userIconText = document.getElementsByClassName("iconText");
const userIconDiv = document.getElementById("userIcons");
const rCorners2 = document.getElementById("rcorners2");
const homeContainerDiv = document.getElementById("homePanel");
const icons = document.querySelectorAll('#userIcons li');
const menuFilterBtn = document.getElementById("menuFilter");

let isMenuExpanded = false;

menuFilterBtn.onclick = function(){
    isMenuExpanded = !isMenuExpanded;

    // 切换全局容器的类
    userIconDiv.classList.toggle("user-icons-expanded", isMenuExpanded);
    userIconDiv.classList.toggle("user-icons-collapsed", !isMenuExpanded);
    
    homeContainerDiv.classList.toggle("home-panel-expanded", isMenuExpanded);
    homeContainerDiv.classList.toggle("home-panel-collapsed", !isMenuExpanded);
    
    rCorners2.classList.toggle("rcorners2-expanded", isMenuExpanded);

    // 切换每个图标元素的类
    for (let i = 0; i < userIconText.length; i++) {
        userIconText[i].classList.toggle("icon-text-expanded", isMenuExpanded);
        userIconText[i].classList.toggle("icon-text-collapsed", !isMenuExpanded);
        
        icons[i].classList.toggle("icon-item-expanded", isMenuExpanded);
    }

    console.log(isMenuExpanded ? "菜单已展开" : "菜单已收起");
}

关键改进点 #

• 移除冗余内层循环，避免重复执行逻辑
• 用统一状态变量isMenuExpanded控制切换，确保每次点击仅执行一个分支
• 全局样式修改移到循环外，避免重复覆盖
• 方案2采用CSS类管理样式，符合分离关注点原则，更易维护和修改

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