Jump to content

slideDown & slideUp issue


Recommended Posts

I have the following responsive site and i'm having an issue with the mobile nav menu:

http://www.endeavor.cl/

When you resize the window or load it in a mobile device, you have a menu with sub-menu items with a slide-down effect that show you the sub-menu items everytime you click on them and, if you click them again or click somewhere else, the sub-menu item will hide itself with a slide-up effect. The problem is when you resize the window again and click again the sub-menu items, they will now show and inmediately hide, like they execute the 2 steps without waiting for a second clicking.

Here's the code:

$(window).on('load resize', function () {   
    if ($(window).width() >= 1000){ 
      $("#menu-top").removeClass();
      $("#menu-top").addClass("desktop");
    }else{
      $("#menu-top").removeClass();
      $("#menu-top").addClass("touch");
      $("#menu-top.touch .menu-item-has-children a").addClass("primer-boton").css('cursor','pointer');
      $("#menu-top.touch .sub-menu a").removeClass();
      $("#menu-top.touch .primer-boton").removeAttr("href");
      $('#menu-top.touch .menu-item-has-children > .sub-menu').parent().click(function() {
        var submenu = $(this).children('.sub-menu');
        if ( $(submenu).is(':hidden') ) {
        $(submenu).slideDown(200);
        } else {
        $(submenu).slideUp(900);
        }
      });
      
    }

  });
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...