JQuery hasClass代码失效排查：非首页幻灯片激活时隐藏菜单

你遇到的核心问题是初始代码只在DOM加载完成时执行一次，而页面滚动导致区块的uncode-scroll-active类变化时，代码不会重新运行——这就是为什么控制台手动执行有效（此时目标类已经存在），但部署到站点后没效果的原因。

你的临时hover方案能生效，是因为每次鼠标移动触发hover事件时，都会重新检查类的状态，但这依赖用户交互，不是最优解。下面是两种更可靠的实现方式：

方案1：监听滚动事件（简单通用） #

把判断逻辑封装成可复用的函数，在页面初始化和每次滚动时执行：

// 封装菜单切换逻辑
function toggleMainMenu() {
  // 检查是否有目标区块处于激活状态（包含portfolio的active类）
  const isActiveSectionVisible = 
    $('.about-us, .services, .ocw-whole-testimonials, .ocw-blog, .contact-us').hasClass('uncode-scroll-active') ||
    $('.portfolio').hasClass('active');
  
  // 切换菜单：激活区块存在时隐藏，否则显示
  $('#menu-main-menu').toggle(!isActiveSectionVisible);
}

$(document).ready(function() {
  // 页面加载完成后先执行一次，确保初始状态正确
  toggleMainMenu();
  
  // 监听窗口滚动事件，每次滚动时检查状态
  $(window).on('scroll', function() {
    toggleMainMenu();
  });
});

方案2：监听类变化（精准高效） #

如果滚动事件触发过于频繁（可能影响性能），可以用MutationObserver监听目标元素的类属性变化，只在类实际改变时执行判断：

function toggleMainMenu() {
  const isActiveSectionVisible = 
    $('.about-us, .services, .ocw-whole-testimonials, .ocw-blog, .contact-us').hasClass('uncode-scroll-active') ||
    $('.portfolio').hasClass('active');
  
  $('#menu-main-menu').toggle(!isActiveSectionVisible);
}

$(document).ready(function() {
  toggleMainMenu();
  
  // 给每个目标区块添加类变化监听
  $('.about-us, .services, .portfolio, .ocw-whole-testimonials, .ocw-blog, .contact-us').each(function() {
    const observer = new MutationObserver(function(mutations) {
      // 只要类属性变化，就重新检查状态
      mutations.forEach(mutation => {
        if (mutation.attributeName === 'class') {
          toggleMainMenu();
        }
      });
    });
    
    // 监听当前元素的属性变化（只监听class）
    observer.observe(this, { attributes: true });
  });
});

为什么这两种方案有效？ #

• 方案1通过滚动事件触发状态检查，因为区块的uncode-scroll-active类通常是在滚动到对应位置时添加的，滚动事件能覆盖这个场景。
• 方案2直接监听元素的类变化，是最精准的方式，只有当目标区块的激活类被添加/移除时才会执行逻辑，性能更优。

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