Bootstrap 3導航欄顏色下拉按鈕，當激活

Question

我有一個自舉導航欄，我想上色。只有當導航欄上的按鈕被點擊時纔會顯示下拉菜單，而不是懸停，因此適用於移動用戶。

現在它顯示爲白色，並且按鈕處於活動狀態時文本顏色會變黑。當它被盤旋時，它會變成更深的藍色陰影，這是我希望它在活動時保持藍色的陰影。我已經嘗試了很多其他的例子，例如.active> a：focus和.active> a：active，但都不起作用。

的導航欄的HTML代碼低於：

<nav id="menu" class="navbar navbar-default"> 

      <div class="container-fluid" id="fullNav"> 

       <div class="navbar-header"> 

        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarBody" aria-expanded="false" id="collapsedNavbarExpand"> 
         <span class="sr-only">Toggle navigation</span> 
         <span class="icon-bar" ></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 

        <a class="navbar-brand" href="index.html">Logo</a> 

       </div> 

       <div class="collapse navbar-collapse" id="navbarBody"> 

        <ul class="nav navbar-nav"> 

         <li class="dropdown"> 

          <a href="#" class="dropdown-toggle navOption" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> 
           Tourism 
           <span class="caret"> </span> 

          </a> 

          <ul class="dropdown-menu"> 

           <li> <a href="../Pages/tourismHub.html"> <b> Tourism Hub </b> </a> </li> 
           <li role="separator" class="divider"></li> 
           <li> <a href="../Pages/eatingOut.html"> Eating Out </a> </li> 
           <li> <a href="../Pages/attractions.html"> Attractions </a> </li> 
           <li> <a href="../Pages/events.html"> Events </a> </li> 
           <li> <a href="../Pages/history.html"> Town History </a> </li> 

          </ul> 

         </li> 

         <li class="dropdown"> 

          <a href="#" class="dropdown-toggle navOption" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> 

           Residents 
           <span class="caret"> </span> 

          </a> 

          <ul class="dropdown-menu"> 

           <li> <a href="../Pages/residentsHub.html"> <b> Residents Hub </b> </a> </li> 
           <li role="separator" class="divider"></li> 
           <li> <a href="../Pages/events.html"> Events </a> </li> 
           <li> <a href="../Pages/eatingOut.html"> Eating Out </a> </li> 
           <li> <a href="../Pages/history.html"> History </a> </li> 

          </ul> 

         </li> 

         <li class="dropdown"> 

          <a href="#" class="dropdown-toggle navOption" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> 

           Prospective Residents 
           <span class="caret"> </span> 

          </a> 

          <ul class="dropdown-menu"> 

           <li> <a href="../Pages/prospectiveResidentsHub.html"> <b> Prospective Residents Hub </b> </a> </li> 
           <li role="separator" class="divider"></li> 
           <li> <a href="../Pages/realEstate.html"> Real Estate </a> </li> 
           <li> <a href="../Pages/attractions.html"> Attractions </a> </li> 
           <li> <a href="../Pages/history.html"> Town History </a> </li> 
           <li> <a href="../Pages/eatingOut.html"> Eating Out </a> </li> 

          </ul> 

         </li> 

         <li class="dropdown"> 

          <a href="#" class="dropdown-toggle navOption" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> 

           Locations 
           <span class="caret"> </span> 

          </a> 

          <ul class="dropdown-menu"> 

           <li> <a href="../Pages/locationsHub.html"> <b> Locations Hub </b> </a> </li> 
           <li role="separator" class="divider"></li> 
           <li> <a href="../Pages/marina.html"> Marina </a> </li> 
           <li> <a href="../Pages/highStreet.html"> High Street </a> </li> 
           <li> <a href="../Pages/parishWharf.html"> Parish Wharf </a> </li> 
           <li> <a href="../Pages/lakeGrounds.html"> Lake Grounds </a> </li> 

          </ul> 

         </li> 

         <li> <a href="../Pages/map.html" class="navOption"> Map </a> </li> 

        </ul> 

       </div> 

      </div> 

     </nav> 

縮進有點破損，由於其粘貼了我的網站。 CSS代碼可以在JSFiddle中看到。 bootstrap.js，bootstrap.css和jquery-2.2.0.js被進一步導入頁面。

以下鏈接了一個可用的JSFiddle示例。要查看實際效果，您必須展開結果窗口，以便導航欄不會摺疊。您也必須從一個下拉按鈕中刪除您的鼠標一旦點擊看到它變成白色。

這裏是的jsfiddle鏈接：https://jsfiddle.net/hezejk88/9/

的任何解決方案，將是巨大的感謝！

Answer 1

那種風格的應用時，下拉既.open和的a元素集中：

.navbar-default .navbar-nav>.open>a, 
.navbar-default .navbar-nav>.open>a:hover, 
.navbar-default .navbar-nav>.open>a:focus { 
    background-color: #e7e7e7; 
    color: #555; 
} 

您當前的倍率不迎合聚焦式的，所以你只需要補充一點，在：

.navbar-default .navbar-nav > .open > a, 
.navbar-default .navbar-nav > .open > a:hover, 
.navbar-default .navbar-nav > .open > a:focus, /* <- This one was missing. */ 
.navbar-default .navbar-nav > .open > a:active { 
    color: #ffffff; 
    background-color: #084c78; 
} 

Amended JSFiddle demo。該修復應用於第53行。

Answer 2

試試這個js。

<script> 
$(document).ready(function() { 
    var url = document.URL; 
    $(".list-unstyled li").each(function() { 
     var y = $(this).children("a").attr('href'); 
     var pieces = url.split('/'); 
     //var routeData= route.substring(0, route.indexOf('?')); 
     var abc= pieces[pieces.length - 1].substring(0,pieces[pieces.length - 1].indexOf('?')); 
     if(abc) 
     { 
      if (pieces[pieces.length - 1].substring(0,pieces[pieces.length - 1].indexOf('?')) == y) 
      { 
       if ($(this).parents(".has-submenu").length == 1) 
       { 
        $(this).addClass("active"); 
        $(this).parents(".has-submenu").addClass("active") 
       } 
       else 
       { 
        $(this).addClass("active"); 
       } 
      } 
     } 
     else 
     { 
      if (pieces[pieces.length - 1] == y) 
      { 
       if ($(this).parents(".has-submenu").length == 1) 
       { 
        $(this).addClass("active"); 
        $(this).parents(".has-submenu").addClass("active") 
       } 
       else 
       { 
        $(this).addClass("active"); 
       } 
      } 
     } 
    }); 

}); 
</script>