2013-12-20 54 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(); 
    }); 
}); 
添加