2013-12-20 96 views
1

我正在與jQuery的導航下拉菜單。當您懸停父標籤時,導航菜單將顯示子標籤。但是我想在父項標籤懸停時添加一個類所以我可以在懸停的時候給它添加與子標籤相同的顏色。jQuery導航選項卡添加類時,徘徊

有人可以幫助我嗎?由於

我的jQuery:

$(document).ready(function(e) { 
     $("#header_inner .menu-header-container ul li").hover(function() { 
      $("#header_inner .menu-header-container ul li a", this).addClass('hover'); 
      $("ul.sub-menu", this).slideToggle(50); 
     }); 
    }); 

HTML:

<div class="menu-header-container"> 
    <ul id="menu-header" class="menu"> 
     <li><a href="http://www.url.com/">Risicomanagement</a> 
      <ul class="sub-menu"> 
       <li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15"><a href="http://www.url.com/">Bedrijfsaansprakelijkheidsverzekering</a></li> 
       <li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32"><a href="http://www.url.com/">Beroepsaansprakelijkheidsverzekering</a></li> 
       <li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36"><a href="http://www.url.com/">Bestuurdersaansprakelijkheidsverzekering</a></li> 
      </ul> 
     </li> 
     <li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25"><a href="http://www.url.com/">Pensioen</a></li> 
     <li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-24"><a href="http://www.url.com/">Hypotheek</a></li> 
     <li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23"><a href="http://www.url.com/">Zorg</a></li> 
     <li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27"><a href="http://www.url.com/">Consultancy</a></li> 
    </ul> 
</div> 
+0

你需要什麼?如果僅用於CSS,你有沒有考慮過使用CSS':hover'選擇器? –

+0

是的,但當我首先懸停我的父母選項卡,然後我的孩子比懸停狀態消失。 – Robbert

回答

0

嘗試,

$(document).ready(function(e) { 
    $("#header_inner .menu-header-container ul li").hover(function() { 
     $(this).find("a").addClass('hover'); 
     $(this).closest(".sub-menu").slideToggle(50); 
    }); 
}); 
+0

謝謝,就是這樣! – Robbert

+0

@Robbert很高興爲您提供幫助。 –

0

工作的jsfiddle:http://jsfiddle.net/83Ujj/ CSS:在的jsfiddle

$(document).ready(function (e) { 
    $("#menu-header li").hover(function() { 
     $(this).find("a").addClass("hover"); 
     $(this).find('.sub-menu').show(); 
    }, function() { 
     $(this).find("a").removeClass("hover"); 
     $(this).find('.sub-menu').hide(); 
    }); 
}); 
添加