使用javascript突出顯示父菜單項

當我點擊父菜單項時，它會突出顯示下拉菜單中的所有子菜單項，我該如何解決該問題。使用javascript突出顯示父菜單項

的javascript：

$(function() { 
    var url = window.location.href.substr(window.location.href.lastIndexOf("/") + 1); 
    $('[href$="' + url + '"]').parents("li").addClass("current_menu_item"); 
});

CSS：

#menu ul .current_menu_item a /* highlight current menu */ 
{ 
    color: Yellow; 
}

HTML：

<div id="menu"> 
    <ul> 
     <li><a href="/Services.aspx" class="top_parent" title="Our services">Services</a> 
      <ul> 
       <li><a href="/Design.aspx">Design</a></li> 
       <li><a href="/Construction.aspx">Construction</a></li> 
       <li><a href="/Refurbishment.aspx">Refurbishment</a></li> 
      </ul> 
     </li> 
     <li><a href="/Experience.aspx" title="Our experience">Experience</a></li> 
     <li><a href="/Ourwork.aspx" title="Our previous work">Our Work</a></li> 
     <li><a href="/Contact.aspx" title="Contact us">Contact</a></li> 
     <li><a href="/About.aspx" title="About us">About</a></li> 
    </ul> 
</div>

當我點擊下拉菜單項，它突出主菜單項目和我所有的下拉列表菜單項如此（黃色突出顯示，藍色懸停）：

enter image description here

如何使用javascript刪除下拉菜單項中的突出顯示，或突出顯示父菜單和所選下拉菜單項。

來源

2014-04-03 Mindless

您可以使用子選擇>只針對a元素是.current_menu_item

變化的直接子#menu ul .current_menu_item a到#menu ul .current_menu_item > a

來源

2014-04-03 12:41:16

哇，謝謝，沒想到解決的辦法是在5分鐘內如此簡單 – Mindless

，它不允許我在atm – Mindless

此行.parents("li")是找到所有的父母li，但你只需要前一。

因此，與closest()改變它，讓它爲：

$(function() { 
    var url = window.location.href.substr(window.location.href.lastIndexOf("/") + 1); 
    $('[href$="' + url + '"]').closest("li").addClass("current_menu_item"); 
});

和在線測試與最接近：http://jsfiddle.net/56fqd/
與父母：http://jsfiddle.net/56fqd/1/

來源

2014-04-03 12:42:45 Aristos

使用javascript突出顯示父菜單項

回答

相關問題