アクティブクラスをブートストラップドロップダウンで使用する方法

Question

私は次のブートストラップnavbarを持っています。

<ul class="nav navbar-nav navbar-right"> 
    <li class="active"><a href="#">Menu 1</a></li> 
    <li class="dropdown"> 
     <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 2 <span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
      <li><a href="#">Option 1</a></li> 
      <li><a href="#">Option 2</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Menu 3</a></li>    
    <li><a href="#">Menu 4</a></li> 
</ul> 

私は、次のCSSを使用して所望の色&の背景色を取得しています3 & 4、メニュー1をクリックしてください。

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { 
    color: #fbfbfb; 
    background-color: #105b9c; 
} 

ドロップダウンからオプション（オプション1またはオプション2）のいずれかを選択した場合、メニュー2に同じ効果が欲しいです。現在私はそれを取得していません。

更新日： Fiddel link

Answer 1

私は、この既存のCSSコードに新しいルール.navbar-デフォルト.nav .dropdown.open> Aを追加しました。次のコードでそれを達成し

CSSこのことができます

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus, 
.navbar-default .nav .dropdown.open > a 
{ 
    color: #fbfbfb; 
    background-color: #105b9c; 
} 

希望..

Answer 2

。

$('nav li').on('click', function() { 
    $('nav li').removeClass('active'); 
    $(this).addClass('active'); 
}); 

フィドル：あなたは '1'オプションをクリックした場合link