摺疊菜單中的Boostrap導航元素選擇器

Question

我想選擇摺疊的Bootstrap導航欄中的導航鏈接。我希望移動版導航元素的顏色有所不同。我試圖用navbarCollapse.in這樣做，但這不起作用。

window.onload = $('.navbar-wrapper a').css('color', 'white'); 
window.onload = $('#navbarCollapse.in a').css('color', '#36454F'); 

我的導航欄看起來如下：

<nav role="navigation" class="nav navbar navbar-fixed-top navbar-default navbar-wrapper white-link"> 
      <div class="container"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a href="index.html" class="navbar-brand"><div class="logo logo-color-white"></div>Brand</a> 
     </div> 
     <!-- Collection of nav links and other content for toggling --> 
     <div id="navbarCollapse" class="collapse navbar-collapse"> 
      <ul class="nav navbar-nav navbar-right"> 
           <li class="approach-li"><a href="approach.html" style="color: black;"><i class="fa fa-rocket">&nbsp;&nbsp;Approach</i></a></li> 
           <li class="services-li"><a href="services.html" style="color: black;"><i class="fa fa-tags">&nbsp;&nbsp;Services</i></a></li> 
           <li class="about-li"><a href="about.html" style="color: black;"><i class="fa fa-building-o">&nbsp;&nbsp;About</i></a></li> 
          <li class="qa-li"><a href="qa.html" style="color: black;"><i class="fa fa-question-circle">&nbsp;&nbsp;Q&amp;A</i></a></li>    
           <li class="navbarpadding"> 
             <form action="contact.html"> 
               <button class="btn navbar-btn">Contact us</button> 
             </form> 
           </li> 
      </ul> 
        </div> 
       </div> 
    </nav> 

Answer 1

你必須使用jQuery的是什麼？在你的情況下，我會建議只使用CSS，與媒體查詢結合，僅在移動設備上應用顏色修改。

CSS代碼

<style type="text/css"> 

//Color modification will be applied only for mobile devices 
@media (max-width: 992px) 
{  
    .navbar-default .navbar-nav > .active > a, 
    .navbar-default .navbar-nav > li > a 
    { 
     color :Red;  
    } 
} 

</style> 

HTML代碼

<nav class="navbar navbar-default" role="navigation"> 
<div class="container-fluid"> 
    <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> 

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     </ul> 
    </div> 
</div> 
</nav> 

乾杯！