下拉菜单使父链接在子链接处于活动状态时处于活动状态

Question

滚动时，子菜单链接在活动时会改变颜色。我希望父级(菜单类别(也更改颜色，如果它的子项之一处于活动状态。

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav text-uppercase ml-auto">    
<li class= "nav-item tab-menu-link">
<div class="tab-menu">
<a class="nav-link" id="AboutParent">About &#9660;</a>            
<div class="tab-menu-content" id="AboutTabMenu">
<ul class="navbar-nav text-uppercase ml-auto" >
<li class="nav-item tab-menu-content-links">
<a class="Subnavnav-link nav-link js-scroll-trigger" href="#About">About TTCU</a>
</li>
<li class="nav-item tab-menu-content-links">
<a class="Subnavnav-link  nav-link js-scroll-trigger" href="#Achievements">Achievements</a>
</li>
<li class="nav-item tab-menu-content-links">
<a class="Subnavnav-link nav-link js-scroll-trigger" href="#Team">Team</a>
</li>
<li class="nav-item tab-menu-content-links">
<a class="Subnavnav-link nav-link js-scroll-trigger" href="#FAQ">FAQ</a>
</li>
<li class="nav-item tab-menu-content-links">
<a class="Subnavnav-link nav-link js-scroll-trigger" href="#Location">Location</a>
</li>
</ul>
</div>
</div>
</li> 

我尝试了两种方法，使用 css 或 JQuery，但它们都不起作用：

$(window).scroll( function(){
if($("#About").hasClass("active")){
$("#AboutParent").addClass("active");
}

}(;

.tab-menu-link:active > a, .tab-menu-link .active  > a {
color: #84bd00;
width: 100%;

}

Answer 1

CSS

.tab-menu-content-links a:active, .tab-menu a
{
color:red;
}

更改About ▼的颜色(如果 中的任何链接(。tab-menu-content-links处于活动状态。