如何让jQuery实时监听元素类状态，自动执行对应DOM类操作？

针对你需要实时监听菜单menu-open类的存在状态，来切换头部元素样式的需求，推荐两种实现方式：

方法一：使用MutationObserver（推荐，高性能实时监听） #

这是浏览器原生的DOM变化监听API，能精准捕获元素类名的变化，性能优于定时轮询：

jQuery(document).ready(function() {
  // 定位目标导航元素
  const targetNav = document.querySelector('#main-menu nav');
  
  // 封装样式切换逻辑
  function updateHeaderStyles(menuIsOpen) {
    const $contactBtn = jQuery('.contact-button a');
    const $mainHeader = jQuery('.main-header');
    
    if (menuIsOpen) {
      $contactBtn.addClass('make-green');
      $mainHeader.addClass('make-blue');
    } else {
      $contactBtn.removeClass('make-green');
      $mainHeader.removeClass('make-blue');
    }
  }
  
  // 页面加载时先同步一次状态
  updateHeaderStyles(targetNav.classList.contains('menu-open'));
  
  // 创建观察者，监听class属性变化
  const classObserver = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      if (mutation.attributeName === 'class') {
        updateHeaderStyles(targetNav.classList.contains('menu-open'));
      }
    });
  });
  
  // 启动监听，仅关注class属性的变化
  classObserver.observe(targetNav, {
    attributes: true,
    attributeFilter: ['class']
  });
});

优势： #

• 实时响应类名变化，无需依赖点击事件
• 仅在类名实际变化时触发操作，性能开销极低
• 原生API支持，无需额外插件

方法二：定时轮询（兼容旧浏览器） #

如果需要兼容IE11等不支持MutationObserver的旧浏览器，可以使用定时检查的方式：

jQuery(document).ready(function() {
  let previousMenuState = false;
  
  function checkMenuStatus() {
    const currentMenuState = jQuery('#main-menu nav').hasClass('menu-open');
    
    // 仅当状态变化时执行样式切换
    if (currentMenuState !== previousMenuState) {
      previousMenuState = currentMenuState;
      const $contactBtn = jQuery('.contact-button a');
      const $mainHeader = jQuery('.main-header');
      
      if (currentMenuState) {
        $contactBtn.addClass('make-green');
        $mainHeader.addClass('make-blue');
      } else {
        $contactBtn.removeClass('make-green');
        $mainHeader.removeClass('make-blue');
      }
    }
  }
  
  // 初始化同步状态
  checkMenuStatus();
  // 每100ms检查一次，可根据需求调整间隔
  setInterval(checkMenuStatus, 100);
});

注意事项： #

• 间隔时间越小，响应越快，但会增加少量性能消耗，建议设置在100-200ms之间
• 通过记录上一次状态避免重复执行相同操作

通用提示 #

• 确保#main-menu nav选择器准确匹配你的导航元素
• 如果主题菜单的激活类名不是menu-open，请同步修改代码中的对应类名
• 两种方案都无需依赖主导航的点击事件，无论通过何种方式切换菜单状态，都会自动同步头部样式

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