當子菜單被加入時，保持父li高亮

Question

你好傢伙我怎樣才能讓父母「li」突出顯示背景或在下拉導航菜單中給某個類提供一些來自CSS的屬性？菜單被訪問？類似的東西會指示它正在導航的菜單的哪個部分，並且背景保持高亮直到改變菜單。

HTML

<ul id="menu"> 
    <li><a href="#">About </a></li> 
    <li><a href="#">Programmes</a> 
     <ul class="secondLevel"> 
      <li><a onClick="ajaxCall();" href="">Undergraduate</a></li> 
      <li><a href="#">Postgraduate</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Academics</a></li> 
    <li><a href="#">Research</a></li> 
    <li><a href="#">Facilities</a></li> 
</ul> 

CSS

#menu, #menu ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} #menu { 
    width: 958px; 
    /*margin: 60px auto;*/ 
    border: 1px solid #222; 
    background-color: #111; 
    background-image: linear-gradient(#444, #111); 

box-shadow: 
    0 1px 1px #777; 
} #menu:before, #menu:after { 
    content: ""; 
    display: table; 
} #menu:after { 
    clear: both; 
} #menu { 
    zoom: 1; 
} #menu li { 
    float: left; 
    border-right: 1px solid #222; 
    box-shadow: 1px 0 0 #444; 
    position: relative; 
} #menu a { 
    float: left; 
    padding: 11px 40px; 
    color: #999; 
    text-transform: uppercase; 
    text-decoration: none; 
    text-shadow: 0 1px 0 #000; 
} #menu li:hover > a { 
    color: #fafafa; 
} * html #menu li a:hover { /* IE6 only */ 
    color: #fafafa; 
} #menu ul { 
    margin: 20px 0 0 0; 
    _margin: 0; /*IE6 only*/ 
    opacity: 0; 
    visibility: hidden; 
    position: absolute; 
    top: 38px; 
    left: 0; 
    right: -1px; 
    z-index: 1000000; 
    background: #444; 
    background: linear-gradient(#444, #111); 

box-shadow: 
    0 -1px 0 rgba(255, 255, 255, .3); 

transition:all 
    .2s 

ease-in-out; 
} #menu li:hover > ul { 
    opacity: 1; 
    visibility: visible; 
    margin: 0; 
} #menu ul ul { 
    top: 0; 
    left: 150px; 
    margin: 0 0 0 20px; 
    _margin: 0; /*IE6 only*/ 
    box-shadow: -1px 0 0 rgba(255, 255, 255, .3); 
} #menu ul li { 
    float: none; 
    display: block; 
    border: 0; 
    _line-height: 0; /*IE6 only*/ 
    box-shadow: 0 1px 0 #111, 0 2px 0 #666; 
} #menu ul li:last-child { 
    box-shadow: none; 
} #menu ul a { 
    padding: 10px; 
    _height: 10px; /*IE6 only*/ 
    display: block; 
    white-space: nowrap; 
    float: none; 
    text-transform: none; 
} #menu ul a:hover { 
    background-color: #000000; 
} #menu ul li:first-child > a { 
    /*border-radius: 3px 3px 0 0;*/ 
    padding: 11px 13px; 
} #menu ul li:first-child > a:after { 
    content: ''; 
    position: absolute; 
    left: 40px; 
    top: -6px; 
} #menu ul ul li:first-child a:after { 
    left: -6px; 
    top: 50%; 
    margin-top: -6px; 
    border-left: 0; 
} #menu ul li:first-child a:hover:after { 
    border-bottom-color: #000; 
} #menu ul ul li:first-child a:hover:after { 
    border-right-color: #000; 
    border-bottom-color: transparent; 
} #menu ul li:last-child > a { 
    /*border-radius: 0 0 3px 3px*/; 
    padding: 11px 20px; 
} 

jsFiddle

Answer 1

您可以使用jQuery的.secondLevel元素添加單擊事件做到這一點：

$(document).ready(function(){ 
    $('.secondLevel').find('li').click(function(){ 

     //removing the previous selected menu state 
     $('#menu').find('li.active').removeClass('active'); 

     //adding the state for this parent menu 
     $(this).parents('li').addClass('active'); 
    }); 
}); 

而對於菜單創建active狀態：

#menu li.active{ 
    background: #ccddff; 
} 

活生生的例子：http://jsfiddle.net/L94N6/2/

更新

爲了使其與這兩個列表中的工作，你可以根據清單類中添加一個簡單的條件：

$('#menu').find('li').click(function(){ 
    //removing the previous selected menu state 
    $('#menu').find('li.active').removeClass('active'); 

    //is this element from the second level menu? 
    if($(this).closest('ul').hasClass('secondLevel')){ 
     $(this).parents('li').addClass('active'); 

    //this is a parent element 
    }else{ 
     $(this).addClass('active'); 
    } 
}); 

活生生的例子：http://jsfiddle.net/L94N6/4/

Answer 2

如果我正確理解你的要求，你只需要添加

#menu li:hover { 
    background: red; 
} 

這是因爲當內容處於懸停狀態時，下拉父項的li的懸停狀態仍然存在。