Question

I have created a responsive menu that breaks at 480px and below. I have it to where the following reacts if:

1. The user clicks on a the “Menu” link.
2. The menu slideToggles out.
3. The sub-menus slideToggle out onClick as well.
4. But you cannot click on any of the pages.

Does this have something to do with the return false?

You may view the example here: http://www.stlredtails.com/construction/

You may need to resize the browser at or belw 480px to see the responsive navigation in action.

Here is the jQuery for the navigation:

jQuery(".navigation ul").hide();
jQuery("#navigation").click(
    function() {
       jQuery(this).siblings("ul").slideToggle(150, "swing");
       return false;
    }
);
jQuery(".navigation > ul > li").click(
    function() {
       jQuery(this).children("ul").slideToggle(150, "swing");
       return false;
    }
);

Thank you all!

Answer 1

The problem comes from the return false. When you’re clicking the links, you’re also clicking the ancestors li and ul. Before the link “activates” the functions bound to the ancestors click event execute. Since they return false the default browser behavior (navigating away) is prevented.

There are better solutions for this kind of menu behavior, but using what you already you have (and assuming you won’t be changing your html) you can simply add the following to your javascript:

$('.navigation').on('click', 'a:only-child', function(e) {
    e.stopPropagation();
});

This searches for all links in the navigation menu that are the only child of their parents (which in this case, happen to be the links you want to continue working as links) and prevents the ancestors click events from executing – the return false shouldn’t happen anymore.