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的颜色。

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

1 个答案: