MainelyDesign.com Blog

Jquery Direct Descendant Selector (using the >)

Posted on 11/17/2009 at 01:08 pm by Kevin Wentworth
Viewed 14,857 times | 0 comments

I'd been struggling with a very simple accordion menu script.  The problem was that I couldn't stop all of the links from returning false, when I only wanted to top link to return false.  Let me show you my code:

What was going on (and correctly I might add) was all links contained in an li with a ul would return false, and wouldn't follow the link.  I wrote this convoluted function to parse out the href and change the window location:

But I didn't like that either.  Too much code for something that should be easily controlled by Jquery.  Turns out, I hadn't been using the descendent selector: the '>' in the $() selector function. 

It's all about the > dummy!

When I changed my code just slightly, so only the direct descendent of the li:has(ul) > a would return false.  Perfect, only affecting the one a, not all the a's in the ul.

That's how I made my simple accoridion menu, turned bloated accordion menu, back into a simple accordion menu.