根据子元素class修改父级div样式的JS实现问题

看起来你是想在移动端子菜单触发元素（.child-trigger）添加child-open类时，给对应的父级菜单项（也就是那个"How you'll Learn"的<a>标签）设置背景色对吧？之前的代码没生效，我帮你分析下问题和可行的解决方案：

为什么原代码没生效？ #

你用的$( ".child-open" ).parents().addClass( "has-child-open" );有两个潜在问题：

1. 选择器范围太广：parents()会选中目标元素的所有祖先元素，而不是你需要的那个包含目标<a>标签的特定父元素，导致样式可能没作用在正确的节点上。
2. 执行时机不对：如果这段代码只是在页面加载时执行一次，而child-open类是用户点击菜单后才动态添加的，那代码根本不会捕捉到类变化后的状态。

解决方案 #

根据常见的菜单结构（假设目标<a>和.child-trigger是同级，或者同属一个父菜单容器），给你两种可行的实现方式：

方式一：绑定点击事件（适合菜单切换逻辑由你控制的情况） #

如果.child-open类是通过点击.child-trigger添加的，直接在点击事件里同步修改父菜单的类：

// 绑定子菜单触发元素的点击事件
$('.child-trigger').on('click', function() {
  // 先切换自身的child-open类（如果菜单原有逻辑没做这一步的话）
  $(this).toggleClass('child-open');
  // 向上查找最近的菜单容器（比如<li>或带特定类的父元素），切换样式类
  const parentMenuItem = $(this).closest('.menu-item'); // 这里的.menu-item需要替换成你实际的菜单容器类
  parentMenuItem.toggleClass('has-child-open');
});

然后配合CSS给目标<a>设置背景色：

/* 当父容器有has-child-open类时，修改内部a标签的背景色 */
.has-child-open > a[role="menuitem"] {
  background-color: #你的目标颜色;
}

方式二：监听类变化（适合菜单逻辑由第三方脚本控制的情况） #

如果child-open类是由其他脚本动态添加/移除的，用MutationObserver监听类属性变化，自动同步样式：

// 选中所有子菜单触发元素
const triggers = document.querySelectorAll('.child-trigger');

triggers.forEach(trigger => {
  // 创建类变化观察者
  const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      // 只关注class属性的变化
      if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
        const isOpen = trigger.classList.contains('child-open');
        // 找到对应的目标<a>标签（假设a是trigger的前一个同级元素）
        const targetLink = trigger.previousElementSibling;
        // 或者如果a在父容器里，用closest找父容器再选a：
        // const targetLink = trigger.closest('.menu-item').querySelector('a[role="menuitem"]');
        
        if (isOpen) {
          targetLink.style.backgroundColor = '#你的目标颜色';
          // 也可以用addClass的方式：targetLink.classList.add('menu-link-active');
        } else {
          targetLink.style.backgroundColor = ''; // 还原默认背景
          // targetLink.classList.remove('menu-link-active');
        }
      }
    });
  });

  // 启动观察者，只监听class属性
  observer.observe(trigger, { attributes: true, attributeFilter: ['class'] });
});

调试小技巧 #

1. 打开浏览器控制台，输入$('.child-open').closest('.menu-item')，看是否能精准选中包含目标<a>的父容器，验证选择器是否正确。
2. 在代码中加console.log()，确认事件或观察者是否触发，以及目标元素是否被正确选中。

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