CODEWITHSUNDEEP
javascriptjquery
imjp
imjp

Reputation: 6695

How to find a parent's child with jQuery?

I have a menu that looks like this:

<ul class="menu">
  <li><a href="#">zing</a></li>
  <li>
    <a href="#">page</a>
    <ul>
      <li>foo</li>
      <li>bar</li>
    </ul>
  </li>
</ul>


I'd like the sub menu to fadeIn when I hover over the page link. This is my code so far but for some reason it's not working and I don't think this is the correct way to achieve this anyways:

$('.menu li a:nth-child(2)').hover(function(){
    $('.menu li ul').fadeIn(150);
}, function(){
    $('.menu li ul').fadeOut(150);
});


Anyone know how I can reach my goal according to best standards to make the submenu of the 2nd li to appear when I hover over page?

Upvotes: 1

Views: 112

Answers (3)

laurens peeters
laurens peeters

Reputation: 555

Check this fiddle out: http://jsfiddle.net/vPLAc/3/

No need for counting children that way. Every list item with a submenu will react to this code.

Upvotes: 0

JaredPar
JaredPar

Reputation: 754725

The nth-child selector needs to be applied to the <li> element not the <a>. 

$('.menu li ul li:nth-child(2)').hover(function(){
    $('.menu li ul').fadeIn(150);
}, function(){
    $('.menu li ul').fadeOut(150);
});

Fiddle: http://jsfiddle.net/9u3V7/

Upvotes: 1

musicinmyhead
musicinmyhead

Reputation: 1476

It would probably be a good idea to have your hovers only apply to menus that have a submenu. You could do something like this:

$('.menu > li > a').filter(function(){
    if( $(this).siblings('ul').length ){ return true; }
}).hover(
    function(){ $(this).siblings('ul').fadeIn(150); }
    ,function(){ $(this).siblings('ul').fadeOut(150); }
);

Upvotes: 2

Related Questions