WordPress(Divi主题)窗口resize后，如何保留jQuery添加的菜单类？

核心原因 #

移动浏览器滚动时隐藏/显示导航栏会触发窗口resize事件，Divi主题或关联脚本在该事件中重置了菜单的DOM类，导致手动添加的激活类被清除。

可行解决方案 #

• 方案1：记录菜单状态，resize后恢复
  用变量存储菜单的激活状态，点击图标时更新状态，窗口resize时根据变量重新设置菜单的类（加防抖避免频繁触发）：
  jQuery版本：

  let isMobileMenuActive = false;
  
  jQuery("#cdBarsicon").click(function () {
    isMobileMenuActive = !isMobileMenuActive;
    jQuery(".cdMobileMenu").toggleClass("cdMobileActive", isMobileMenuActive);
  });
  
  jQuery(window).on("resize", function () {
    clearTimeout(window.resizeTimer);
    window.resizeTimer = setTimeout(function() {
      jQuery(".cdMobileMenu").toggleClass("cdMobileActive", isMobileMenuActive);
    }, 200);
  });
  

  原生JS版本：

  let isMobileMenuActive = false;
  const mobileMenu = document.getElementById("cdMobileMenu");
  const menuToggle = document.getElementById("cdBarsicon");
  
  menuToggle.addEventListener("click", function() {
    isMobileMenuActive = !isMobileMenuActive;
    mobileMenu.classList.toggle("cdActive", isMobileMenuActive);
  });
  
  window.addEventListener("resize", function() {
    clearTimeout(window.resizeTimer);
    window.resizeTimer = setTimeout(function() {
      mobileMenu.classList.toggle("cdActive", isMobileMenuActive);
    }, 200);
  });
  

• 方案2：针对性取消主题的resize重置逻辑
  如果是Divi主题自带的resize事件在重置菜单，先查看主题JS代码，找到负责导航重置的resize事件绑定函数，比如主题用jQuery(window).on('resize', diviNavResizeFunc)，就用jQuery(window).off('resize', diviNavResizeFunc)移除它，再添加自己的resize处理（同方案1）。
  注意：不要直接用jQuery(window).off('resize')，会移除所有resize事件，可能破坏主题其他功能。

• 方案3：用CSS强制锁定激活状态样式
  给激活状态的菜单加!important提升样式优先级，避免被主题的resize重置覆盖：

  .cdMobileMenu.cdMobileActive {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    /* 补充你需要的其他激活样式 */
  }
  

  这个方案适合菜单状态完全由点击控制的场景，建议配合方案1一起使用。

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