harry_ord Posted December 9, 2016 Share Posted December 9, 2016 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 comment Share on other sites More sharing options...
justsomeguy Posted December 9, 2016 Share Posted December 9, 2016 You're running all of that code again when the window resizes. So, you're attaching a second click handler. It's going to run that click handler twice, and the second time will collapse it again. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now