CODEWITHSUNDEEP
jqueryhtmlcssmobile
wickywills
wickywills

Reputation: 4204

Simple jQuery mobile menu stops working when browser resized

I have created a menu that changes to a burger navigation when the browser is resized down to mobile. The problem is that if I resize it to mobile, then back to desktop, then back to mobile again, the menu stops working.

I will create a fiddle in a bit, but can anyone see why this would be happening from the jQuery below?

if(window.innerWidth < 960) {

  jQuery('header nav .main').hide();
  jQuery('header nav .main').removeAttr('style');
  jQuery('header .mob-nav .menu').removeAttr('style');
  jQuery('header .mob-nav .menu').removeClass('selected');

  jQuery('header .mob-nav .menu').on('click', function(){

    if( jQuery(this).hasClass('selected') ) {
      jQuery(this).removeClass('selected');
      jQuery('header nav .main').stop().slideUp()
    } else {
      jQuery(this).addClass('selected');
      jQuery('header nav .main').stop().slideDown();
    }

  });

} else {
  jQuery('header nav .main').removeAttr('style');
}

Upvotes: 0

Views: 186

Answers (1)

mhu
mhu

Reputation: 18061

This probably happens because every time the window is resized below 960 pixels an additional click-handler is attached to 'header .mob-nav .menu'. Unbind the previously attached handler first, using 'off'. Try changing it to:

if(window.innerWidth < 960) {

  jQuery('header nav .main').hide();
  jQuery('header nav .main').removeAttr('style');
  jQuery('header .mob-nav .menu').removeAttr('style');
  jQuery('header .mob-nav .menu').removeClass('selected');

  jQuery('header .mob-nav .menu').off('click').on('click', function(){

    if( jQuery(this).hasClass('selected') ) {
      jQuery(this).removeClass('selected');
      jQuery('header nav .main').stop().slideUp();
    } else {
      jQuery(this).addClass('selected');
      jQuery('header nav .main').stop().slideDown();
    }

  });

} else {
  jQuery('header nav .main').removeAttr('style');
}

Or consider placing the bind event code outside the function.

Upvotes: 1

Related Questions