Sub-menu link closes menu instead of going to specified link

Question

I'm using the code below to toggle an accordion menu, but each time an item in the child menu is clicked, the menu slides up without going to the actual link.

http://jsfiddle.net/Y2vM3/

When clicking MISC in the jsfiddle above, the menu opens. But when clicking the child link, it closes right back up. It works fine when "return false;" is removed (it's there to prevent the browser from jumping to the top of the page), but with it, the sub-menu just slides up..?

jQuery(document).ready(function ($) {
    jQuery('.menu ul').slideUp(0);

    jQuery('.menu li.sub').click(function () {
        var target = jQuery(this).children('a');
        if(target.hasClass('menu-expanded')){
            target.removeClass('menu-expanded');
        }else{
            jQuery('.menu-item > a').removeClass('menu-expanded');
            target.addClass('menu-expanded');
        }
        jQuery(this).find('ul:first')
            .slideToggle(350)
            .end()
            .siblings('li')
            .find('ul')
            .slideUp(350);
        return false;
    });
});

for full client-side things please always provide a jsfiddle — thpl, Aug 08 '13 at 13:04
I don't understand. You sound like the patient who tells his doctor, "It hurts when I do this." So don't do that. — isherwood, Aug 08 '13 at 13:16
after `.slideUp(350)` add `.preventdefault()` and remove `return false` — Davor Mlinaric, Aug 08 '13 at 13:17
@isherwood: :) The reason I want to use "return false" is so the page wouldn't jump to the top of the page when "MISC" is clicked. — Ray, Aug 08 '13 at 13:18
@Davor Mlinaric: No dice, now the sub menu is open on page load and won't open/close at all. — Ray, Aug 08 '13 at 13:19

score 0 · Accepted Answer · edited May 23 '17 at 10:31

0

By using return false; you're telling the browser to not follow the link. Use preventDefault instead. Here's more on the distinction.

http://jsfiddle.net/isherwood/Y2vM3/4/

...
        jQuery(this).find('ul:first')
            .slideToggle(350)
            .end()
            .siblings('li')
            .find('ul')
            .slideUp(350);
        preventDefault();
    });
});

Also, use

href="javascript:void(0)"

instead of a hash.

edited May 23 '17 at 10:31

Community

1
1

answered Aug 08 '13 at 13:13

isherwood

58,414
16
114
157

When "MISC" is clicked, the browser now jumps to the top of the page :( – Ray Aug 08 '13 at 13:22
I'm using WP so using "javascript:void(0)" as link won't stick, but leaving the link empty does. Cheers! – Ray Aug 08 '13 at 13:28

Sub-menu link closes menu instead of going to specified link

1 Answers1