基于子类的更改父级div

Question

当我的移动菜单打开时，我试图更改元素的背景颜色，但是很难找到javascript。

这就是我想要做的。

当<a href="//online-port-ac-uk-7429396.hs-sites.com/online-learning" aria-haspopup="true" aria-expanded="false" role="menuitem">How you'll Learn</a>中有“子打开”时，我想更改<div class="child-trigger"><i></i></div>的背景色。

现在这是我的JS：

$( ".child-open" )
    .parents()
        .addClass( "has-child-open" );

但没有运气。

这是问题中的页面- http://online-port-ac-uk-7429396.hs-sites.com/

非常感谢!

Answer 1

您可以使用addClassNameListener来检查子类是否有更改。

​

function addClassNameListener(elemId, callback) {
    var elem = document.getElementById(elemId);
    var lastClassName = elem.className;
    window.setInterval( function() {   
       var className = elem.className;
        if (className !== lastClassName) {
            callback();   
            lastClassName = className;
        }
    },10);
}
$( "#test" ).click(function() {
   $("#child").toggleClass("child-open");
});
addClassNameListener('child', function(){
  $( "#parent" ).removeClass("has-child-open");
  if($("#child").hasClass( "child-open" )){
      $("#parent" ).addClass( "has-child-open");
  }
});

.has-child-open{background-color: red;}

.child-open{background-color: green;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id ="parent"href="//online-port-ac-uk-7429396.hs-sites.com/online-learning" aria-haspopup="true" aria-expanded="false" role="menuitem">How you'll Learn</div></a>


<div id="child" class="child-trigger"><i></i>child</div>

<button id="test">change</button >

​

Answer 2

我认为您根本不需要使用JavaScript --您可以简单地使用CSS：

.child-open {
    background-color: #c3d5fa;
}

当元素拥有child-open类时，它会自动将background-color样式应用于它。

如果您要寻找的是只使用JavaScript的方法，可以将CSS注入页面：

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = `
    .child-open {
        background-color: #c3d5fa;
    }
`;
document.getElementsByTagName('head')[0].appendChild(style);