-1

I have a menu list where some menu items also have sub-menus, with following structure:

<div>
<ul class="mobile-menu">
    <li class="menu-item"><a href=..></a></li> // menu item without sub-menu
    <li class="menu-item-has-children"> //menu item with sub-menu
        <a href=...</a>  //link attached to parent menu item
        <ul class="sub-menu">
            <li ><a href=...</a></li>
            <li ><a href=...</a></li>
        </ul>
    </li>
</ul>
</div>

I've written some code for the event that the link attached to a menu item with a child is clicked. Inside that is an if statement, which says if the list item is already marked as open, then close (slideUp) the submenu and remove the open marker, otherwise open (slideDown) the submenu and add the open marker.

By default, all sub-menus are initially closed and have no open marker. When I click on a parent menu item, the submenu slides open and then immediately slides shut again. I stepped through it in Firebug and the code is literally running through the if statement and at the end of the else statement it is returning to the beginning and doing the if statement a second time before stopping. I've tried adding "return false;" statements but they make no difference.

jQuery("li.menu-item-has-children > a").click(function(event){

event.preventDefault();

if(jQuery(this).parent().hasClass("open")){
    jQuery(this).next("ul").slideUp(100);
    jQuery(this).parent().removeClass("open");
    return false;
} else {
    jQuery(this).next("ul").slideDown(100);
    jQuery(this).parent().addClass("open");
    return false;
}

return false;
});

I don't understand?!? Any help will be gratefully received. Thank you!

Ronel

Edit: So I got it functioning in a jsfiddle (https://jsfiddle.net/ronelz/hvy9wxy9/12/) and the code works perfectly?! However on the actual website it runs the if statement twice i.e. instead of opening a submenu, it opens and then immediately closes the submenu again.

Any suggestions on where I could begin looking for the cause would be gratefully received. Thank you.

Ronelz
  • 193
  • 1
  • 3
  • 8
  • can you add the css so it can be added to a fiddle? .n.b you don't need the `return`'s, a click event doesn't return a value – atmd Feb 18 '15 at 15:28
  • Pls ,Provide jsfiddle and tell what Should happen! – Pratik Joshi Feb 18 '15 at 15:28
  • Remove all `return false;` Just have `event.preventDefault();` What is the result ? – Pratik Joshi Feb 18 '15 at 15:38
  • Um, I think you overestimate my ability to code... I've never used jsfiddle before so I tried to set one up but I can't even get it to recognise the click event. It's here https://jsfiddle.net/ronelz/hvy9wxy9/6/ in case that helps. Alternatively, you can go to the site I'm developing (http://novelnatter.com), either on a mobile/tablet or by narrowing your browser window to under 980px so that you see the mobile menu navigator. Open the menu, click on any link except home or about and watch the sub-menu bounce open and closed. It should simply open. – Ronelz Feb 18 '15 at 17:30

1 Answers1

0

Would've posted this as a comment but I can't now. Have you tried using $(selector).on('click',function(e){}) instead of $(selector).click(function(e){})? what is the result?

$(selector).on('click', function(e){ //code to be executed; });

k32y
  • 407
  • 6
  • 11
  • What would that do ? on is a delegate usful Only when the elements are added Dynamically in HTML . – Pratik Joshi Feb 18 '15 at 15:35
  • Just to know if you get the same behaviour. If so then you will know the error is from the anonymous function within `click()` . i.e. the `if(){}else{}` . Should help in your debugging. – k32y Feb 18 '15 at 15:37
  • Thank you for the idea, I tried but it made no difference. – Ronelz Feb 18 '15 at 17:17
  • It seems the problem is that both your `if(){}` and `else{}` are getting executed `onclick()`. Somehow 2 `click()` events are being fired on one click. – k32y Feb 18 '15 at 21:54
  • Replacing `return false` with `e.stopPropagation();` might fix that. Take a look at the solutions here http://stackoverflow.com/questions/6731894/click-event-is-calling-twice-in-jquery – k32y Feb 18 '15 at 22:20