导航下拉菜单切换图标状态异常的修复求助

嗨，我完全懂你的困扰——当点击另一个带expand_more的菜单时，之前打开的下拉菜单虽然收起来了，但图标还停留在expand_less，没法自动切回expand_more对吧？

咱们先捋清楚问题出在哪：你现在把图标切换的逻辑放在了一个独立的点击事件里，而关闭已打开菜单的操作只处理了active类和下拉框的显示，没同步更新图标的hide状态，这就导致图标和菜单状态脱节了。

给你个简单直接的修复方案，把图标切换的逻辑整合到handleNavClick函数里，这样关闭其他菜单的时候就能同步调整图标状态：

修改后的JavaScript代码 #

$(".navigationV1 ul.top-level-menu .label").on("click", handleNavClick);

function handleNavClick() {
  const isActive = $(this).hasClass("active");

  if (isActive) {
    // 当前菜单已激活，收起下拉并切换图标
    $(this).siblings(".drop-down-menu").slideToggle();
    $(this).toggleClass("active");
    $(this).find(".material-symbols-outlined").toggleClass("hide");
  } else {
    // 先处理所有已打开的菜单：收起下拉、移除激活状态、重置图标
    $(".active").each(function() {
      $(this).removeClass("active");
      $(this).siblings(".drop-down-menu").slideUp();
      // 强制把图标切回expand_more显示、expand_less隐藏
      $(this).find(".material-symbols-outlined:contains('expand_more')").removeClass("hide");
      $(this).find(".material-symbols-outlined:contains('expand_less')").addClass("hide");
    });
    // 再打开当前菜单，切换图标
    $(this).siblings(".drop-down-menu").slideToggle();
    $(this).toggleClass("active");
    $(this).find(".material-symbols-outlined").toggleClass("hide");
  }
}

改动说明 #

• 删掉了单独的图标点击事件，把所有交互逻辑统一到一个函数里，避免事件冲突和状态不同步
• 关闭其他菜单时，通过.each()遍历每个激活的菜单，手动重置图标状态，确保expand_more显示、expand_less隐藏
• 保留了你原本的菜单展开/收起逻辑，只是把图标切换也整合进来，逻辑更连贯

你的HTML和CSS代码完全不用改，直接替换JS部分就能用。测试一下效果：点击菜单1，下拉展开，图标变成expand_less；再点击菜单3，菜单1的下拉自动收起，图标切回expand_more，同时菜单3展开，图标变成expand_less，完美同步状态~

备注：内容来源于stack exchange，提问作者spidey677