Disabling normal link behaviour on click with an if statement in Jquery?

Question

I've been banging my head with this all day, trying anything and everything I can think of to no gain. I'm no Jquery guru, so am hoping someone here can help me out. What I'm trying to do in pseudo code (concept) seems practical and easy to implement, but obviously not so =D

What I have is a navigation sidebar, with sub menu's within some li's, and a link at the head of each li.

When a top level link is clicked, I want the jquery to check if the link has a sibling ul. If it does, the link doesn't act like a link, but slides down the sibling sub nav. If there isn't one, the link should act normally.

Here's where I'm at currently, what am I doing wrong?

$('ul.navigation li a').not('ul.navigation li ul li a').click(function (){
    if($(this).parent().contains('ul')){
        $('ul.navigation li ul').slideUp();
        $(this).siblings('ul').slideDown();
        return false;
    }
    else{
        alert('Link Clicked')
        // Maybe do some more stuff in here...
    }
});

Any ideas?

Answer 1

For the "what am I doing wrong?" part...there is no .contains() method :) There's a $.contains() which is different, but not what you want here...you want to check the .length property. I can't be 100% sure without your markup, but if the <a> and <ul> are siblings, I blieve this is what you're after:

$('ul.navigation > li > a').click(function (){
    if($(this).siblings('ul').length){
        $('ul.navigation > li > ul').slideUp();
        $(this).siblings('ul').slideDown();
        return false;
    } else{
        alert('Link Clicked');
        // Maybe do some more stuff in here...
    }
});

You can see a working demo here :)