Невозможно изменить цвет элемента списка при использовании .addClass

Question

Я пытаюсь изменить цвет элементов списка навигационных элементов в прокрутке, используя jQuery .addClass, я успешно изменил логотип и цвет фона заголовка, но я я застрял на этой части. HTML выглядит следующим образом:

<nav id="tf-menu" class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 

    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 

     <div class="logo"> 
     <a class="navbar-brand white-logo" href="index.html"><img src="img/logoNewRev.png" alt="purus consultants logo" ></a> 
     <a class="navbar-brand scrolling-logo" href="index.html"><img src="img/logoNew2.png" alt="purus consultants logo" ></a> 
     </div> 

    </div> 


    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav navbar-right"> 
     <li role="presentation" ><a href="index.html">home</a></li> 
         <li role="presentation"class="active"><a href="about.html">about us</a></li> 
         <li class="dropdown"> 
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">services <span class="caret"></span></a> 
          <ul class="dropdown-menu"> 
           <li role="presentation" ><a href="./Implementation.html">implementation</a></li> 
           <li role="presentation" ><a href="./Training.html">training</a></li> 
           <li role="presentation" ><a href="./Support.html">support</a></li> 
          </ul> 
         </li> 
         <li role="presentation"><a href="contacts.html">contact</a></li> 
         <li role="presentation"><a href="community.html">community</a></li> 
         <li role="presentation"><a href="news.html">news</a></li> 
         <li role="presentation"><a href="FAQ's.html">faq's</a></li> 
     </ul> 
    </div> 
    </div> 
</nav> 

КСС это:

#tf-menu.navbar-default .navbar-nav .dark > li { 
color: black !important; 
font-size: 12px; 
letter-spacing: 1px; 
font-weight: bold; 
} 

И JQuery это:

$(window).bind('scroll', function() { 
    var navHeight = $(window).height() - 140; 
    if ($(window).scrollTop() > navHeight) { 
     $('.navbar-default').addClass('on'); 
     $('#tf-menu.navbar-default.navbar-nav > li').addClass('dark'); 
     $('.logo').addClass('scrolling'); 

    } else { 
     $('.navbar-default').removeClass('on'); 
     $('#tf-menu.navbar-default.navbar-nav > li').removeClass('dark'); 
     $('.logo').removeClass('scrolling'); 

    } 
}); 

Это работает при добавлении .На класса и .scroling , и я вижу, что он добавляет .dark к элементам списка, поэтому я понимаю, что css неверен, но я не могу понять это.

Answer 1

$('#tf-menu.navbar-default.navbar-nav > li').addClass('dark'); 

Это говорит элемент с идентификатором ТФОМ-меню, которое также имеет класс Navbar-умолчанию, а также имеет класс NavBar-Nav с прямым потомком ли. Может быть, попробовать:

$('#tf-menu.navbar-default .navbar-nav').addClass('dark'); 

#tf-menu.navbar-default .navbar-nav.dark > li > a { 
color: black !important; 
font-size: 12px; 
letter-spacing: 1px; 
font-weight: bold; 
} 

Или, если вы пытаетесь превратить отдельные Lis темные

$('#tf-menu.navbar-default .navbar-nav > li').addClass('dark'); 

#tf-menu.navbar-default .navbar-nav > li.dark > a { 
color: black !important; 
font-size: 12px; 
letter-spacing: 1px; 
font-weight: bold; 
} 

Ориентация на якорь в селекторе, так как анкеры могут игнорировать их цвет родителей.