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);

根据子类更改父div

2 个答案: