ドロップダウンが開いたときにリンクをアクティブにするにはどうすればよいですか？

Question

ブートストラップのnavbarで、navリンクをアクティブにする方法 （navリンクのbg-colorを変更するだけ） navリンクのそれぞれのドロップダウンが開かれるとき またはドロップダウンメニューのリンクが表示されますか？ が、私はこれを試して、次のコード

$('ul.nav li.dropdown').hover(function() { 
 
    $(this).find('.dropdown-menu').stop(true, true).delay(50).fadeIn(50); 
 
\t }, function() { 
 
    $(this).find('.dropdown-menu').stop(true, true).delay(50).fadeOut(50); 
 
});

.navbar-nav li a{ 
 
    color: #000; 
 
    text-transform: uppercase; 
 
    padding: 13px 10px; 
 
    text-align: center; 
 
} 
 
.navbar-nav li a:hover{ 
 
    background-color: #238500; 
 
    color: #fff; 
 
} 
 
.dropdown-menu li a{ 
 
    font-weight: normal !important; 
 
    padding: 15px !important; 
 
    color: #fff !important; 
 
    text-transform: capitalize !important; 
 
    text-align: left !important; 
 
} 
 
ul.dropdown-menu li a:hover{ 
 
    background-color: #3c3c3c; 
 
    color: #fff; 
 
    background-image: none; 
 
} 
 
.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover{ 
 
\t background-image: none; 
 
} 
 
ul.dropdown-menu li a:hover > .navbar-nav li a{ 
 
\t background-color: #238500 !important; 
 
} 
 
.dropdown-menu{ 
 
    background-color: #238500; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<ul class="nav navbar-nav"> 
 
    <li class="dropdown"> 
 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Education</a> 
 
    <ul class="dropdown-menu"> 
 
     <li><a href="#">Goals and Objectives</a></li> 
 
     <li><a href="#">Governing priciples</a></li> 
 
     <li><a href="#">Board of directors</a></li> 
 
    </ul> 
 
    </li> 
 
</ul>

Answer 1

を試してみました：私の理解あたりとして

$('ul.nav li.dropdown').hover(function() { 
 
    $(this).find('.dropdown-menu').stop(true, true).delay(50).fadeIn(50); 
 
    $(this).addClass("hover"); 
 
\t }, function() { 
 
    $(this).find('.dropdown-menu').stop(true, true).delay(50).fadeOut(50); 
 
    $(this).removeClass("hover"); 
 
});

.navbar-nav li a{ 
 
    color: #000; 
 
    text-transform: uppercase; 
 
    padding: 13px 10px; 
 
    text-align: center; 
 
} 
 
.navbar-nav li a:hover{ 
 
    background-color: #238500; 
 
    color: #fff; 
 
} 
 
.dropdown-menu li a{ 
 
    font-weight: normal !important; 
 
    padding: 15px !important; 
 
    color: #fff !important; 
 
    text-transform: capitalize !important; 
 
    text-align: left !important; 
 
} 
 
ul.dropdown-menu li a:hover{ 
 
    background-color: #3c3c3c; 
 
    color: #fff; 
 
    background-image: none; 
 
} 
 
.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover{ 
 
\t background-image: none; 
 
} 
 
ul.dropdown-menu li a:hover > .navbar-nav li a{ 
 
\t background-color: #238500 !important; 
 
} 
 
.dropdown-menu{ 
 
    background-color: #238500; 
 
} 
 

 
.hover { 
 
background-color: grey; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<ul class="nav navbar-nav"> 
 
    <li class="dropdown"> 
 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Education</a> 
 
    <ul class="dropdown-menu"> 
 
     <li><a href="#">Goals and Objectives</a></li> 
 
     <li><a href="#">Governing priciples</a></li> 
 
     <li><a href="#">Board of directors</a></li> 
 
    </ul> 
 
    </li> 
 
</ul>

Answer 2

を、あなたは何をしたいということでしょうか？

.navbar-nav .open>a, 
.navbar-nav .open>a:focus, 
.navbar-nav .open>a:hover { 
    background-color: #238500 ; 
    color: #fff; 
} 

このスタイルをCSSに追加するだけです。