Bootstrap 3 navbar цвет выпадающего меню при активном

Question

У меня есть загрузочный блок Navbar, который я хочу покрасить. Выпадающий список отображается только тогда, когда нажимается кнопка на навигационной панели, а не зависает, поэтому она подходит для мобильных пользователей.

Прямо сейчас он выглядит белым, а цвет текста меняется на черный, когда кнопка активна. Когда он зависает, он меняется на более темный оттенок синего, и это оттенок синего, я хочу, чтобы он оставался, когда он активен. Я пробовал много других примеров, таких как .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>