父元素激活状态变更时伪元素颜色切换问题求助

先给你拆解现有代码里的核心问题：

1. 条件判断逻辑完全错误：elem === !document.activeElement 里，!document.activeElement 是布尔值（true/false），而elem是DOM元素对象，两者永远不可能相等，正确写法应该是 elem !== document.activeElement。
2. 代码仅执行一次：这段JS只会在页面加载时跑一遍，后续下拉菜单激活/失活的状态变化不会触发重新判断，必须绑定事件监听来实时响应。
3. 样式规则重复插入风险：每次触发都会往样式表插新规则，容易导致样式冲突，用CSS类切换的方式更稳妥。

修正方案（推荐用类切换实现） #

第一步：调整CSS规则 #

用类来区分激活/未激活状态，避免JS直接操作样式表：

/* 未激活状态：伪元素默认绿色 */
.et-menu .menu-item-has-children>a:first-child:after {
  font-family: ETmodules;
  content: "3";
  font-size: 35px !important;
  position: absolute;
  right: -10px;
  top: 8px;
  font-weight: 500 !important;
  color: #ACD375;
}

/* 激活状态：伪元素继承父元素颜色 */
.et-menu .menu-item-has-children.active>a:first-child:after {
  color: inherit;
}

第二步：编写JS监听状态变化 #

根据下拉菜单的激活逻辑（通常是点击或键盘聚焦），绑定事件切换类：

const menuItem = document.querySelector('li#menu-item-57');
const menuLink = menuItem.querySelector('a');

// 点击切换激活状态
menuItem.addEventListener('click', () => {
  menuItem.classList.toggle('active');
});

// 键盘聚焦/失焦时同步状态
menuLink.addEventListener('focus', () => {
  menuItem.classList.add('active');
});
menuLink.addEventListener('blur', () => {
  menuItem.classList.remove('active');
});

额外简化方案（如果框架自带激活类） #

你的HTML里已经有current-menu-item类，这通常是导航框架自动添加的激活状态类，直接用它写CSS就行，连JS都不用：

/* 未激活状态 */
.et-menu .menu-item-has-children>a:first-child:after {
  color: #ACD375;
  /* 其他原有样式 */
}

/* 激活状态（用框架自带类） */
.et-menu .menu-item-has-children.current-menu-item>a:first-child:after {
  color: inherit;
}

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