Return false on parent only

Question

I am using return false to stop a parent link firing. The parent link is used to open the dropdown.

The problem I have is this return false is also setting return false for the children in the dropdown.

How can I set only the parent link to false, and all the children links to true?

jQuery:

$('#account').on('click', function() {
    $('#account-options').fadeIn('slow'); 
    $(document).one('click', function() { 
        $("#account-options").fadeOut('slow'); 
    });
    return false;
});

$("#account-options").on('click', function() { 
    return false; 
});

HTML:

<li id="account"><a href="/account">Your Account</a>
    <ul id="account-options">
        <li><a href="">test1</a></li>
        <li><a href="">test2</a></li>
    </ul>
</li>

Thank you.

Answer 1

You're running into event propagation. When you click on one of the <a> elements in #account-options it bubbles up to #account-options, executing its click event handler, then in turn up to #account, executing its event handler, both of which prevent the default behaviour of the event (in this case, following the link). You need to stop the event propagation at the <a> level:

$('#account-options a').on('click', function(e) {
   e.stopPropagation(); 
});

jsFiddle demo