点击ubermenu切换按钮时修改导航栏Logo的z-index并复原的实现咨询

当然可以实现！这里有两种实用方案，你可以根据自己的HTML结构和需求来选择：

方案一：纯CSS实现（依赖HTML结构） #

如果你的切换按钮和Logo元素在DOM结构中存在可关联的层级关系（比如是相邻兄弟，或者共享同一个父容器），纯CSS就能搞定，不需要写JS：

/* 默认状态下Logo的z-index */
.header-logo {
  z-index: 10; /* 这里替换成你原本的z-index值 */
}

/* 当切换按钮处于打开状态时，修改Logo的z-index */
/* 示例1：如果切换按钮和Logo是相邻兄弟元素 */
.ubermenu-responsive-toggle-open ~ .header-logo {
  z-index: 9999; /* 替换成你想要的打开状态z-index */
}

/* 示例2：如果切换按钮在某个父容器内，父容器会随按钮打开添加类 */
/* .header-container.ubermenu-open .header-logo {
  z-index: 9999;
} */

这种方案的好处是简洁高效，但前提是HTML结构要支持CSS选择器关联，如果按钮和Logo的DOM层级比较分散，就不太适用了。

方案二：JavaScript实现（通用无结构限制） #

如果你的DOM结构比较复杂，纯CSS无法关联元素，用JS是更稳妥的选择，不管元素在哪都能实现：

基础点击监听版 #

// 获取目标元素
const toggleBtn = document.querySelector('.ubermenu-responsive-toggle-main');
const headerLogo = document.querySelector('.header-logo');

// 保存Logo原本的z-index值
const defaultZIndex = window.getComputedStyle(headerLogo).zIndex;

// 监听切换按钮的点击事件
toggleBtn.addEventListener('click', () => {
  const isOpen = toggleBtn.classList.contains('ubermenu-responsive-toggle-open');
  // 根据按钮状态设置z-index
  headerLogo.style.zIndex = isOpen ? '9999' : defaultZIndex;
});

更可靠的类变化监听版 #

如果切换按钮的状态可能通过非点击方式改变（比如键盘操作、脚本触发），用MutationObserver监听类的变化会更准确：

const toggleBtn = document.querySelector('.ubermenu-responsive-toggle-main');
const headerLogo = document.querySelector('.header-logo');
const defaultZIndex = window.getComputedStyle(headerLogo).zIndex;

// 创建观察者实例
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.attributeName === 'class') {
      const isOpen = toggleBtn.classList.contains('ubermenu-responsive-toggle-open');
      headerLogo.style.zIndex = isOpen ? '9999' : defaultZIndex;
    }
  });
});

// 开始监听按钮的class属性变化
observer.observe(toggleBtn, { attributes: true });

这个方法能精准捕捉按钮的状态变化，不会遗漏任何触发场景。

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